/* ============================================
   VARIABLES & RESET — Gold & Dark Luxury Theme
   ============================================ */
:root {
   --bg-dark: #0D0D0D;
   --bg-deep: #141414;
   --bg-card: #1A1A1A;
   --bg-card-hover: #222;
   --bg-warm: #F7F3ED;
   --bg-light: #FAF8F5;
   --bg-cream: #EFEBE4;
   --gold: #C4A265;
   --gold-light: #D4B87A;
   --gold-dark: #A8863D;
   --gold-pale: #E8D5B0;
   --gold-glow: rgba(196, 162, 101, 0.10);
   --gold-border: rgba(196, 162, 101, 0.25);
   --gold-gradient: linear-gradient(135deg, #D4B87A, #C4A265, #A8863D);
   --text: #E8E0D4;
   --text-soft: #B8AFA2;
   --text-muted: #8A8278;
   --text-dark: #2E2A25;
   --text-dark-soft: #5A544D;
   --white: #FFFFFF;
   --divider: rgba(196, 162, 101, 0.18);
   --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.25);
   --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);
   --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.08);
   --shadow-gold: 0 4px 25px rgba(196, 162, 101, 0.20);
   --font-display: 'Playfair Display', serif;
   --font-body: 'Nunito Sans', sans-serif;
   --section-pad: clamp(80px, 10vw, 130px);
   --container: 1200px;
   --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --radius: 12px;
   --radius-sm: 8px;
   --radius-full: 50px;
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased
}

body {
   font-family: var(--font-body);
   font-weight: 400;
   color: var(--text-dark);
   background: var(--bg-warm);
   line-height: 1.75;
   font-size: 16px;
   overflow-x: hidden
}

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

a {
   text-decoration: none;
   color: inherit;
   transition: color .3s var(--ease)
}

.container {
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 clamp(20px, 4vw, 36px)
}

/* NAV ACTIVE STATE */
.nav__link--active {
   color: var(--gold-light) !important;
}

.nav__link--active::after {
   width: 100% !important;
   background: var(--gold) !important;
}

/* TYPOGRAPHY */
.section-label {
   font-family: var(--font-body);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 16px;
   display: block
}

.section-title {
   font-family: var(--font-display);
   font-size: clamp(28px, 4vw, 46px);
   font-weight: 400;
   letter-spacing: .02em;
   line-height: 1.2;
   margin-bottom: 20px;
   color: var(--text-dark)
}

.section-title em {
   font-style: italic;
   font-weight: 400
}

.section-subtitle {
   font-family: var(--font-display);
   font-size: clamp(17px, 2vw, 20px);
   font-weight: 400;
   font-style: italic;
   color: var(--text-dark-soft);
   max-width: 560px;
   line-height: 1.6
}

.gold-line {
   width: 50px;
   height: 2px;
   background: var(--gold-gradient);
   margin: 24px 0;
   border-radius: 1px
}

.gold-line--center {
   margin: 24px auto
}

.text-center {
   text-align: center
}

/* BUTTONS */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-body);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: .18em;
   text-transform: uppercase;
   padding: 16px 36px;
   border-radius: var(--radius-full);
   border: none;
   cursor: pointer;
   transition: all .4s var(--ease);
   position: relative;
   overflow: hidden
}

.btn i {
   font-size: 12px;
   transition: transform .3s var(--ease)
}

.btn:hover i {
   transform: translateX(3px)
}

.btn--gold {
   background: var(--gold-gradient);
   color: var(--bg-dark);
   box-shadow: var(--shadow-gold);
   font-weight: 600
}

.btn--gold:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 35px rgba(196, 162, 101, .45);
   filter: brightness(1.08)
}

.btn--outline-light {
   background: transparent;
   color: var(--white);
   border: 1px solid rgba(255, 255, 255, .3);
   backdrop-filter: blur(4px)
}

.btn--outline-light:hover {
   background: rgba(255, 255, 255, .1);
   border-color: var(--gold-light)
}

.btn--sm {
   padding: 12px 24px;
   font-size: 11px
}

.btn--champagne {
   background: linear-gradient(135deg, #F4EAD5, #D4B87A, #C4A265);
   color: var(--bg-dark);
   box-shadow: 0 8px 25px rgba(196, 162, 101, 0.3);
   font-weight: 700;
   border: 1px solid rgba(255, 255, 255, 0.4);
   font-size: 13px;
   letter-spacing: 0.18em;
   padding: 18px 46px
}

.btn--champagne:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 35px rgba(196, 162, 101, 0.5);
   filter: brightness(1.1)
}

.btn--gray {
   background: rgba(255, 255, 255, 0.1);
   color: var(--white);
   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(8px);
   font-weight: 500;
}

.btn--gray:hover {
   background: rgba(255, 255, 255, 0.18);
   border-color: rgba(255, 255, 255, 0.4);
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* SCROLL REVEAL */
.reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.reveal--left {
   opacity: 0;
   transform: translateX(-50px);
   transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.reveal--right {
   opacity: 0;
   transform: translateX(50px);
   transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.reveal--scale {
   opacity: 0;
   transform: scale(.92);
   transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
   opacity: 1;
   transform: translate(0) scale(1)
}

.stagger-children .reveal:nth-child(1) {
   transition-delay: .05s
}

.stagger-children .reveal:nth-child(2) {
   transition-delay: .12s
}

.stagger-children .reveal:nth-child(3) {
   transition-delay: .19s
}

.stagger-children .reveal:nth-child(4) {
   transition-delay: .26s
}

.stagger-children .reveal:nth-child(5) {
   transition-delay: .33s
}

.stagger-children .reveal:nth-child(6) {
   transition-delay: .40s
}

/* ============================================
   HEADER
   ============================================ */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   padding: 18px 0;
   transition: all .5s var(--ease)
}

.header.scrolled {
   background: rgba(13, 13, 13, .95);
   backdrop-filter: blur(20px) saturate(1.2);
   padding: 10px 0;
   box-shadow: 0 1px 30px rgba(0, 0, 0, .3)
}

.header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between
}

.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   z-index: 1001;
   cursor: pointer
}

.logo__img {
   height: 44px;
   width: auto;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3))
}

.logo__img--footer {
   height: 38px
}

.logo__text {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 600;
   color: var(--white);
   letter-spacing: 0.08em;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   line-height: 1.1;
   display: block
}

.logo__subtext {
   font-size: 1em;
   font-weight: 400;
   opacity: 1;
   letter-spacing: 0.05em
}

.logo__text--light {
   color: var(--gold-pale)
}

.header.scrolled .logo__text {
   color: var(--white);
   text-shadow: none
}

.nav__links {
   display: flex;
   align-items: center;
   gap: 36px
}

.nav__link {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--white);
   position: relative;
   padding: 4px 0;
   transition: all 0.4s var(--ease);
   cursor: pointer;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5)
}

.header.scrolled .nav__link {
   color: rgba(255, 255, 255, 0.8);
   text-shadow: none
}

.nav__link::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 1.5px;
   background: var(--white);
   transition: width 0.4s var(--ease)
}

.nav__link:hover {
   color: var(--white);
   text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8)
}

.nav__link:hover::after {
   width: 100%
}

.header.scrolled .nav__link:hover {
   color: var(--white)
}

.nav__cta {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   padding: 12px 28px;
   border-radius: var(--radius-full);
   background: var(--gold-gradient);
   color: var(--bg-dark);
   transition: all .4s var(--ease);
   box-shadow: var(--shadow-gold);
   cursor: pointer
}

.nav__cta:hover {
   transform: translateY(-1px);
   box-shadow: 0 6px 30px rgba(196, 162, 101, .4);
   filter: brightness(1.08)
}

.hamburger {
   display: none;
   flex-direction: column;
   gap: 6px;
   cursor: pointer;
   z-index: 1001;
   padding: 4px
}

.hamburger__line {
   width: 26px;
   height: 1.5px;
   background: var(--gold-light);
   transition: all .4s var(--ease);
   transform-origin: center
}

.hamburger.active .hamburger__line:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px)
}

.hamburger.active .hamburger__line:nth-child(2) {
   opacity: 0
}

.hamburger.active .hamburger__line:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px)
}

.mobile-nav {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(13, 13, 13, .98);
   backdrop-filter: blur(30px);
   z-index: 999;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 32px;
   opacity: 0;
   transition: opacity .5s var(--ease);
   pointer-events: none
}

.mobile-nav.active {
   opacity: 1;
   pointer-events: all
}

.mobile-nav__link {
   font-family: var(--font-display);
   font-size: 22px;
   letter-spacing: .08em;
   color: var(--gold-pale);
   cursor: pointer;
   transition: color .3s var(--ease)
}

.mobile-nav__link:hover {
   color: var(--gold)
}

/* ============================================
   HERO
   ============================================ */
@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes fadeSlideUp {
   from {
      opacity: 0;
      transform: translateY(25px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes shimmer {
   0% {
      background-position: -200% center
   }

   100% {
      background-position: 200% center
   }
}

.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background: var(--bg-dark)
}

.hero__bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   background: url('hero_new.png') center/cover no-repeat;
   transform: scale(1.08);
   animation: heroZoom 20s ease-in-out infinite alternate;
   will-change: transform
}

@keyframes heroZoom {
   0% {
      transform: scale(1.08)
   }

   100% {
      transform: scale(1.15) translate(-1%, -1%)
   }
}

.hero__overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(160deg, rgba(10, 10, 10, 0.88), rgba(13, 13, 13, 0.78) 40%, rgba(20, 18, 15, 0.70))
}

.hero__grain {
   position: absolute;
   inset: 0;
   z-index: 2;
   opacity: 0.04;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
   background-size: 200px
}

.hero__floats {
   position: absolute;
   inset: 0;
   z-index: 1;
   overflow: hidden;
   pointer-events: none
}

.hero__float {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(196, 162, 101, .08), transparent 70%);
   animation: floatUp 18s infinite ease-in-out
}

.hero__float:nth-child(1) {
   width: 300px;
   height: 300px;
   left: 10%;
   bottom: -150px;
   animation-delay: 0s;
   animation-duration: 18s
}

.hero__float:nth-child(2) {
   width: 200px;
   height: 200px;
   left: 60%;
   bottom: -100px;
   animation-delay: 3s;
   animation-duration: 22s
}

.hero__float:nth-child(3) {
   width: 150px;
   height: 150px;
   left: 30%;
   bottom: -75px;
   animation-delay: 6s;
   animation-duration: 16s
}

.hero__float:nth-child(4) {
   width: 250px;
   height: 250px;
   left: 80%;
   bottom: -125px;
   animation-delay: 9s;
   animation-duration: 20s
}

.hero__float:nth-child(5) {
   width: 180px;
   height: 180px;
   left: 50%;
   bottom: -90px;
   animation-delay: 2s;
   animation-duration: 24s
}

.hero__float:nth-child(6) {
   width: 120px;
   height: 120px;
   left: 15%;
   bottom: -60px;
   animation-delay: 7s;
   animation-duration: 19s
}

@keyframes floatUp {
   0% {
      transform: translateY(0) scale(1);
      opacity: .4
   }

   50% {
      transform: translateY(-50vh) scale(1.3);
      opacity: .15
   }

   100% {
      transform: translateY(-100vh) scale(1);
      opacity: 0
   }
}

.hero__content {
   position: relative;
   z-index: 3;
   text-align: center;
   max-width: 900px;
   padding: 0 20px
}

.hero__title {
   font-family: var(--font-display);
   font-size: clamp(36px, 5.5vw, 62px);
   font-weight: 500;
   color: var(--gold-light);
   line-height: 1.15;
   margin-bottom: 16px;
   animation: fadeSlideUp .8s var(--ease) .3s both;
   letter-spacing: 0.02em;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4)
}

.hero__title em {
   font-style: normal;
   color: var(--white);
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4)
}

.hero__desc {
   font-family: var(--font-body);
   font-size: clamp(15px, 2vw, 20px);
   font-weight: 600;
   color: var(--white);
   margin-bottom: 36px;
   letter-spacing: 0.04em;
   animation: fadeSlideUp .8s var(--ease) .5s both;
   text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5)
}

.glass-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 24px;
   border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: var(--white);
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.04em;
   margin-bottom: 44px;
   animation: fadeSlideUp .8s var(--ease) .6s both;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15)
}

.hero__buttons {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
   animation: fadeSlideUp .8s var(--ease) .7s both
}

.hero__scroll {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   width: 1px;
   height: 50px;
   overflow: hidden
}

.hero__scroll-line {
   width: 1px;
   height: 50px;
   background: linear-gradient(to bottom, var(--gold), transparent);
   animation: scrollDown 2s ease-in-out infinite
}

@keyframes scrollDown {
   0% {
      transform: translateY(-100%)
   }

   100% {
      transform: translateY(100%)
   }
}

/* ============================================
   FREE CONSULTATION BANNER
   ============================================ */
.consul-banner {
   background: var(--bg-dark);
   padding: 20px 0;
   border-bottom: 1px solid var(--gold-border)
}

.consul-banner__inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
   text-align: center
}

.consul-banner__icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(196, 162, 101, .12);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gold);
   font-size: 18px;
   flex-shrink: 0
}

.consul-banner__text {
   color: var(--text-soft);
   font-size: 15px;
   letter-spacing: .02em
}

.consul-banner__text strong {
   color: var(--gold-light);
   font-weight: 600
}

/* ============================================
   SERVICES
   ============================================ */
.services {
   padding: var(--section-pad) 0;
   background: var(--bg-warm)
}

.services__header {
   text-align: center;
   margin-bottom: 60px
}

.services__header .section-subtitle {
   margin: 0 auto
}

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

.service-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 40px 32px;
   box-shadow: var(--shadow-card);
   transition: all .4s var(--ease);
   cursor: pointer;
   border: 1px solid transparent;
   position: relative;
   overflow: hidden
}

.service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--gold-gradient);
   transform: scaleX(0);
   transition: transform .4s var(--ease);
   transform-origin: left
}

.service-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-hover);
   border-color: var(--gold-border)
}

.service-card:hover::before {
   transform: scaleX(1)
}

.service-card__icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(196, 162, 101, .08), rgba(196, 162, 101, .15));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: var(--gold-dark);
   margin-bottom: 24px
}

.service-card__title {
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 14px;
   color: var(--text-dark);
   letter-spacing: .02em
}

.service-card__text {
   font-size: 14px;
   font-weight: 400;
   color: var(--text-dark-soft);
   line-height: 1.75;
   margin-bottom: 16px
}

.service-card__price {
   display: inline-block;
   font-family: var(--font-display);
   font-size: 15px;
   font-weight: 600;
   color: var(--gold-dark);
   padding: 4px 14px;
   background: rgba(196, 162, 101, .08);
   border-radius: var(--radius-full);
   letter-spacing: .04em;
   margin-bottom: 12px
}

.service-card__link {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--gold);
   transition: gap .3s var(--ease)
}

.service-card:hover .service-card__link {
   gap: 10px
}

/* ============================================
   ABOUT
   ============================================ */
.about {
   padding: var(--section-pad) 0;
   background: var(--bg-dark);
   color: var(--text)
}

.about .section-title {
   color: var(--white)
}

.about__inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 6vw, 80px);
   align-items: center
}

.about__image-wrap {
   position: relative
}

.about__image {
   width: 100%;
   aspect-ratio: 3/4;
   object-fit: cover;
   object-position: top;
   border-radius: 16px;
   box-shadow: var(--shadow-soft);
   border: 2px solid var(--gold-border)
}

.about__badge {
   position: absolute;
   bottom: -20px;
   left: 30px;
   background: var(--bg-card);
   border: 1px solid var(--gold-border);
   border-radius: var(--radius);
   padding: 16px 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   box-shadow: var(--shadow-gold)
}

.about__badge-number {
   font-family: var(--font-display);
   font-size: 28px;
   font-weight: 700;
   color: var(--gold)
}

.about__badge-stars {
   display: flex;
   gap: 2px;
   color: var(--gold);
   font-size: 11px
}

.about__badge-text {
   font-size: 11px;
   color: var(--text-muted);
   letter-spacing: .1em;
   text-transform: uppercase
}

.about__text {
   font-size: 15px;
   line-height: 1.85;
   color: var(--text-soft);
   margin-bottom: 16px;
   font-weight: 400
}

.about__features {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin: 32px 0 36px
}

.about__feature {
   display: flex;
   gap: 14px;
   align-items: flex-start
}

.about__feature-icon {
   width: 42px;
   height: 42px;
   min-width: 42px;
   border-radius: 10px;
   background: rgba(196, 162, 101, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   color: var(--gold)
}

.about__feature-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--gold-pale);
   letter-spacing: .04em;
   margin-bottom: 2px
}

.about__feature-text {
   font-size: 12px;
   color: var(--text-muted)
}

/* ============================================
   CUSTOMER PROCESS (Algorytm współpracy)
   ============================================ */
.process {
   padding: var(--section-pad) 0;
   background: var(--bg-warm)
}

.process__header {
   text-align: center;
   margin-bottom: 60px
}

.process__header .section-subtitle {
   margin: 0 auto
}

.process__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px
}

.process-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 40px 24px;
   box-shadow: var(--shadow-card);
   transition: all 0.4s var(--ease);
   border: 1px solid transparent;
   position: relative;
   text-align: center;
   overflow: hidden
}

.process-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--gold-gradient);
   transform: scaleX(0);
   transition: transform 0.4s var(--ease);
   transform-origin: left
}

.process-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-hover);
   border-color: var(--gold-border)
}

.process-card:hover::before {
   transform: scaleX(1)
}

.process-card__number {
   font-family: var(--font-display);
   font-size: 48px;
   font-weight: 700;
   color: var(--bg-warm);
   position: absolute;
   top: 10px;
   right: 20px;
   line-height: 1;
   transition: color 0.4s var(--ease)
}

.process-card:hover .process-card__number {
   color: rgba(196, 162, 101, 0.15)
}

.process-card__icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(196, 162, 101, 0.08), rgba(196, 162, 101, 0.15));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: var(--gold-dark);
   margin: 0 auto 24px;
   position: relative;
   z-index: 2
}

.process-card__title {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 14px;
   color: var(--text-dark);
   letter-spacing: 0.02em;
   position: relative;
   z-index: 2
}

.process-card__text {
   font-size: 14px;
   font-weight: 400;
   color: var(--text-dark-soft);
   line-height: 1.75;
   position: relative;
   z-index: 2
}

.process__cta {
   text-align: center;
   margin-top: 40px
}

/* ============================================
   REVIEWS
   ============================================ */
.reviews-section {
   padding: var(--section-pad) 0 60px;
   background: var(--bg-dark);
   color: var(--text)
}

.reviews-section .section-title {
   color: var(--white)
}

.reviews__score {
   display: flex;
   align-items: center;
   gap: 12px;
   justify-content: center;
   margin-top: 8px;
   flex-wrap: wrap
}

.reviews__score-number {
   font-family: var(--font-display);
   font-size: 36px;
   font-weight: 700;
   color: var(--gold)
}

.reviews__score-stars {
   display: flex;
   gap: 3px;
   color: var(--gold);
   font-size: 16px
}

.reviews__score-count {
   font-size: 14px;
   color: var(--text-muted);
   letter-spacing: .06em
}

.carousel-wrapper {
   position: relative;
   max-width: 1400px;
   margin: 40px auto 0;
   padding: 0 60px
}

.carousel-viewport {
   overflow: hidden;
   border-radius: var(--radius)
}

.carousel-track {
   display: flex;
   transition: transform .5s var(--ease)
}

.carousel-slide {
   flex: 0 0 33.333%;
   padding: 0 12px;
   display: flex
}

.review-card {
   background: var(--bg-card);
   border: 1px solid rgba(196, 162, 101, .12);
   border-radius: var(--radius);
   padding: 32px 28px;
   min-height: 240px;
   display: flex;
   flex-direction: column;
   width: 100%;
   transition: all .4s var(--ease)
}

.review-card:hover {
   border-color: var(--gold-border);
   transform: translateY(-2px)
}

.review-card__stars {
   display: flex;
   gap: 3px;
   margin-bottom: 20px;
   color: var(--gold);
   font-size: 13px
}

.review-card__quote {
   flex: 1;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.7;
   color: var(--text-soft);
   font-style: italic;
   margin-bottom: 24px
}

.review-card__author {
   display: flex;
   align-items: center;
   gap: 14px;
   border-top: 1px solid rgba(196, 162, 101, .1);
   padding-top: 18px
}

.review-card__avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--gold-gradient);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 600;
   color: var(--bg-dark)
}

.review-card__name {
   font-size: 14px;
   font-weight: 600;
   color: var(--gold-pale)
}

.review-card__role {
   font-size: 12px;
   color: var(--text-muted)
}

.car-nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--bg-card);
   border: 1px solid var(--gold-border);
   color: var(--gold);
   font-size: 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .3s var(--ease);
   z-index: 5
}

.car-nav-btn:hover {
   background: var(--gold);
   color: var(--bg-dark)
}

.car-btn-prev {
   left: 0
}

.car-btn-next {
   right: 0
}

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
   position: relative;
   padding: clamp(80px, 10vw, 120px) 0;
   background: linear-gradient(135deg, var(--bg-deep), #1A1610, #0D0D0D);
   overflow: hidden
}

.cta-banner__grain {
   position: absolute;
   inset: 0;
   opacity: .04;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
   background-size: 200px
}

.cta-banner__content {
   text-align: center;
   position: relative;
   z-index: 2
}

.cta-banner__title {
   font-family: var(--font-display);
   font-size: clamp(26px, 4vw, 42px);
   font-weight: 500;
   color: var(--white);
   margin-bottom: 16px;
   letter-spacing: .02em
}

.cta-banner__text {
   font-family: var(--font-display);
   font-size: clamp(15px, 2vw, 18px);
   font-style: italic;
   font-weight: 400;
   color: var(--text-muted);
   margin-bottom: 36px
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
   background: var(--bg-dark);
   padding: 80px 0 0;
   border-top: 1px solid var(--gold-border)
}

.footer__grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 48px;
   padding-bottom: 48px
}

.footer__heading {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 600;
   color: var(--gold-pale);
   margin-bottom: 20px;
   letter-spacing: .04em
}

.footer__brand-text {
   font-size: 14px;
   font-weight: 400;
   color: var(--text-muted);
   line-height: 1.7;
   margin-bottom: 20px
}

.footer__social {
   display: flex;
   gap: 12px
}

.footer__social-link {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid var(--gold-border);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gold);
   font-size: 16px;
   transition: all .3s var(--ease)
}

.footer__social-link:hover {
   background: var(--gold);
   color: var(--bg-dark);
   border-color: var(--gold)
}

.footer__contact-item {
   display: flex;
   gap: 14px;
   margin-bottom: 16px;
   font-size: 14px;
   color: var(--text-soft);
   line-height: 1.6
}

.footer__contact-item i {
   color: var(--gold);
   margin-top: 4px;
   font-size: 14px;
   min-width: 16px
}

.footer__map {
   width: 100%;
   height: 220px;
   border-radius: var(--radius);
   border: 1px solid var(--gold-border);
   filter: grayscale(.5) brightness(.8)
}

.footer__bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid rgba(196, 162, 101, .1);
   padding: 24px 0;
   font-size: 12px;
   color: var(--text-muted);
   letter-spacing: .04em
}

.footer__bottom a {
   color: var(--gold);
   transition: color .3s
}

.footer__bottom a:hover {
   color: var(--gold-light)
}

/* ============================================
   SERVICE SUBPAGES
   ============================================ */
.page-hero {
   position: relative;
   padding: clamp(160px, 18vw, 240px) 0 clamp(80px, 10vw, 130px);
   background: var(--bg-dark);
   overflow: hidden;
   text-align: center
}

.page-hero__bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   filter: brightness(.25) saturate(.5)
}

.page-hero__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(13, 13, 13, .5), rgba(13, 13, 13, .85))
}

.page-hero__content {
   position: relative;
   z-index: 2
}

.page-hero__breadcrumb {
   font-size: 12px;
   font-weight: 400;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px
}

.page-hero__breadcrumb span.link,
.page-hero__breadcrumb a.link {
   color: var(--gold-light);
   cursor: pointer;
   transition: color .3s;
   text-decoration: none;
}

.page-hero__breadcrumb span.link:hover,
.page-hero__breadcrumb a.link:hover {
   color: var(--white)
}

.page-hero__breadcrumb i {
   font-size: 8px
}

.page-hero__title {
   font-family: var(--font-display);
   font-size: clamp(32px, 5vw, 56px);
   font-weight: 400;
   color: var(--white);
   margin-bottom: 16px;
   letter-spacing: .04em;
   animation: fadeSlideUp .8s var(--ease) .2s both
}

.page-hero__subtitle {
   font-family: var(--font-display);
   font-size: clamp(16px, 2vw, 20px);
   font-style: italic;
   font-weight: 400;
   color: rgba(255, 255, 255, .5);
   max-width: 600px;
   margin: 0 auto;
   animation: fadeSlideUp .8s var(--ease) .4s both
}

/* SP Intro */
.sp-intro {
   padding: var(--section-pad) 0;
   background: var(--bg-warm)
}

.sp-intro__inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 6vw, 80px);
   align-items: center
}

.sp-intro__image {
   width: 100%;
   aspect-ratio: 5/4;
   object-fit: cover;
   border-radius: 16px;
   box-shadow: var(--shadow-soft)
}

.sp-intro__title {
   font-family: var(--font-display);
   font-size: clamp(24px, 3vw, 36px);
   font-weight: 500;
   color: var(--text-dark);
   margin-bottom: 20px;
   letter-spacing: .03em
}

.sp-intro__text {
   font-size: 15px;
   line-height: 1.85;
   color: var(--text-dark-soft);
   margin-bottom: 20px;
   font-weight: 400
}

/* SP Benefits */
.sp-benefits {
   padding: 70px 0;
   background: var(--bg-cream)
}

.sp-benefits__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   text-align: center
}

.sp-benefit {
   padding: 36px 20px;
   border-radius: var(--radius);
   background: var(--white);
   box-shadow: var(--shadow-card);
   transition: all .4s var(--ease);
   border: 1px solid transparent
}

.sp-benefit:hover {
   transform: translateY(-4px);
   border-color: var(--gold-border)
}

.sp-benefit__icon {
   width: 56px;
   height: 56px;
   margin: 0 auto 20px;
   border-radius: 50%;
   background: var(--gold-glow);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: var(--gold-dark)
}

.sp-benefit__title {
   font-family: var(--font-display);
   font-size: 14px;
   letter-spacing: .04em;
   margin-bottom: 10px;
   font-weight: 600;
   color: var(--text-dark)
}

.sp-benefit__text {
   font-size: 13px;
   font-weight: 400;
   color: var(--text-dark-soft);
   line-height: 1.6
}

/* SP Process */
.sp-process {
   padding: var(--section-pad) 0;
   background: var(--bg-warm)
}

.sp-process__header {
   text-align: center;
   margin-bottom: 60px
}

.sp-process__steps {
   max-width: 700px;
   margin: 0 auto;
   position: relative
}

.sp-process__steps::before {
   content: '';
   position: absolute;
   left: 32px;
   top: 0;
   bottom: 0;
   width: 1px;
   background: var(--gold-border)
}

.sp-step {
   display: flex;
   gap: 28px;
   margin-bottom: 48px;
   position: relative
}

.sp-step:last-child {
   margin-bottom: 0
}

.sp-step__number {
   width: 64px;
   height: 64px;
   min-width: 64px;
   border-radius: 50%;
   background: var(--white);
   border: 2px solid var(--gold-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 18px;
   color: var(--gold-dark);
   z-index: 2;
   transition: all .4s var(--ease)
}

.sp-step:hover .sp-step__number {
   background: var(--gold-gradient);
   color: var(--white);
   border-color: var(--gold)
}

.sp-step__content {
   padding-top: 8px
}

.sp-step__title {
   font-family: var(--font-display);
   font-size: 17px;
   letter-spacing: .04em;
   margin-bottom: 10px;
   font-weight: 600;
   color: var(--text-dark)
}

.sp-step__text {
   font-size: 14px;
   font-weight: 400;
   color: var(--text-dark-soft);
   line-height: 1.75
}

/* SP Indications */
.sp-indications {
   padding: var(--section-pad) 0;
   background: var(--bg-cream)
}

.sp-indications__inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 36px
}

.sp-ind-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 40px 36px;
   box-shadow: var(--shadow-card)
}

.sp-ind-card__header {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 28px
}

.sp-ind-card__icon {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px
}

.sp-ind-card--yes .sp-ind-card__icon {
   background: rgba(196, 162, 101, .1);
   color: var(--gold-dark)
}

.sp-ind-card--no .sp-ind-card__icon {
   background: rgba(197, 89, 89, .1);
   color: #C55959
}

.sp-ind-card__title {
   font-family: var(--font-display);
   font-size: 17px;
   letter-spacing: .04em;
   font-weight: 600;
   color: var(--text-dark)
}

.sp-ind-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid var(--bg-cream);
   font-size: 14px;
   font-weight: 400;
   color: var(--text-dark-soft);
   line-height: 1.6
}

.sp-ind-item:last-child {
   border-bottom: none
}

.sp-ind-item i {
   margin-top: 4px;
   font-size: 12px;
   min-width: 16px
}

.sp-ind-card--yes .sp-ind-item i {
   color: var(--gold-dark)
}

.sp-ind-card--no .sp-ind-item i {
   color: #C55959
}

/* SP FAQ */
.sp-faq {
   padding: var(--section-pad) 0;
   background: var(--bg-warm)
}

.sp-faq__header {
   text-align: center;
   margin-bottom: 60px
}

.sp-faq__list {
   max-width: 740px;
   margin: 0 auto
}

.faq-item {
   border: 1px solid rgba(196, 162, 101, .12);
   border-radius: var(--radius);
   margin-bottom: 12px;
   overflow: hidden;
   background: var(--white);
   transition: border-color .3s var(--ease)
}

.faq-item:hover,
.faq-item.active {
   border-color: var(--gold-border)
}

.faq-item__question {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 22px 28px;
   cursor: pointer;
   gap: 16px
}

.faq-item__question span {
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 600;
   color: var(--text-dark);
   letter-spacing: .02em
}

.faq-item__icon {
   width: 32px;
   height: 32px;
   min-width: 32px;
   border-radius: 50%;
   border: 1px solid var(--gold-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   color: var(--gold);
   transition: all .3s var(--ease)
}

.faq-item.active .faq-item__icon {
   background: var(--gold-gradient);
   color: var(--bg-dark);
   border-color: var(--gold);
   transform: rotate(45deg)
}

.faq-item__answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height .5s var(--ease), padding .5s var(--ease);
   padding: 0 28px
}

.faq-item.active .faq-item__answer {
   max-height: 300px;
   padding: 0 28px 22px
}

.faq-item__answer p {
   font-size: 15px;
   font-weight: 400;
   color: var(--text-dark-soft);
   line-height: 1.75;
   padding-right: 48px
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px) {
   .services__grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .about__inner,
   .sp-intro__inner {
      grid-template-columns: 1fr;
      gap: 50px
   }

   .about__image-wrap {
      max-width: 500px;
      margin: 0 auto
   }

   .process__grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: 40px
   }

   .sp-benefits__grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .sp-indications__inner {
      grid-template-columns: 1fr
   }

   .carousel-slide {
      flex: 0 0 50%
   }
}

@media(max-width:768px) {
   .nav__links {
      display: none
   }

   .hamburger {
      display: flex
   }

   .mobile-nav {
      display: flex
   }

   .hero__content {
      text-align: center;
      max-width: 100%
   }

   .hero__desc {
      margin: 0 auto 12px
   }

   .hero__buttons {
      justify-content: center
   }

   .services__grid {
      grid-template-columns: 1fr;
      max-width: 420px;
      margin: 0 auto
   }

   .process__grid {
      grid-template-columns: 1fr;
      max-width: 420px;
      margin: 0 auto
   }

   .about__features {
      grid-template-columns: 1fr
   }

   .footer__grid {
      grid-template-columns: 1fr;
      gap: 36px
   }

   .footer__bottom {
      flex-direction: column;
      gap: 12px;
      text-align: center
   }

   .consul-banner__inner {
      flex-direction: column;
      gap: 12px
   }

   .sp-benefits__grid {
      grid-template-columns: 1fr;
      max-width: 400px;
      margin: 0 auto
   }

   .sp-process__steps::before {
      left: 31px
   }

   .faq-item__answer p {
      padding-right: 0
   }

   .btn {
      padding: 14px 28px;
      font-size: 11px
   }

   .carousel-wrapper {
      padding: 0 10px
   }

   .carousel-slide {
      flex: 0 0 100%;
      padding: 0 6px
   }

   .car-nav-btn {
      width: 36px;
      height: 36px;
      font-size: 13px;
   }
}

@media(max-width:480px) {
   .hero__buttons {
      flex-direction: column;
      align-items: center
   }

   .hero__buttons .btn {
      width: 100%;
      justify-content: center;
      max-width: 280px
   }

   .about__badge {
      left: 10px;
      bottom: -15px
   }

   .sp-pricing__features {
      flex-direction: column;
      align-items: center
   }
}

::-webkit-scrollbar {
   width: 8px
}

::-webkit-scrollbar-track {
   background: var(--bg-dark)
}

::-webkit-scrollbar-thumb {
   background: var(--gold-dark);
   border-radius: 4px
}
/* ============================================
   AWARD BADGES IN ABOUT SECTION
   ============================================ */
.about__feature--award {
   align-items: center;
}

.about__award-badge {
   width: 52px;
   height: 52px;
   min-width: 52px;
   border-radius: 10px;
   background: linear-gradient(135deg, rgba(196,162,101,.15), rgba(196,162,101,.05));
   border: 1px solid var(--gold-border);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 4px;
   box-shadow: 0 2px 12px rgba(196,162,101,.12);
}

.about__award-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 6px;
}

/* ============================================
   GALLERY PAGE
   ============================================ */
.gallery-section {
   padding: var(--section-pad) 0;
   background: var(--bg-warm);
}

.gallery__header {
   text-align: center;
   margin-bottom: 40px;
}

.gallery__filters {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-bottom: 44px;
   flex-wrap: wrap;
}

.gallery__filter {
   background: transparent;
   border: 1px solid var(--gold-border);
   color: var(--text-dark-soft);
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   padding: 10px 22px;
   border-radius: var(--radius-full);
   cursor: pointer;
   transition: all .35s var(--ease);
}

.gallery__filter:hover {
   border-color: var(--gold);
   color: var(--gold);
}

.gallery__filter.active {
   background: var(--gold-gradient);
   color: var(--white);
   border-color: transparent;
   box-shadow: var(--shadow-gold);
}

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

.gallery__item {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   cursor: pointer;
   aspect-ratio: 3/4;
   transition: transform .4s var(--ease), opacity .4s var(--ease);
}

.gallery__item.hidden {
   display: none;
}

.gallery__item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s var(--ease);
}

.gallery__item:hover img {
   transform: scale(1.06);
}

.gallery__item-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 50%);
   display: flex;
   align-items: flex-end;
   padding: 18px;
   opacity: 0;
   transition: opacity .35s var(--ease);
}

.gallery__item:hover .gallery__item-overlay {
   opacity: 1;
}

.gallery__item-tag {
   font-family: var(--font-body);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--gold-light);
   background: rgba(0,0,0,.35);
   backdrop-filter: blur(6px);
   padding: 6px 14px;
   border-radius: var(--radius-full);
   border: 1px solid rgba(196,162,101,.25);
}

/* LIGHTBOX */
.lightbox {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 10000;
   background: rgba(0,0,0,.92);
   backdrop-filter: blur(10px);
   align-items: center;
   justify-content: center;
   padding: 40px;
}

.lightbox.active {
   display: flex;
}

.lightbox__img {
   max-width: 90vw;
   max-height: 85vh;
   object-fit: contain;
   border-radius: var(--radius);
   box-shadow: 0 8px 50px rgba(0,0,0,.6);
   animation: lightboxIn .3s var(--ease);
}

@keyframes lightboxIn {
   from { opacity: 0; transform: scale(.95); }
   to   { opacity: 1; transform: scale(1); }
}

.lightbox__close {
   position: absolute;
   top: 24px;
   right: 28px;
   background: rgba(255,255,255,.1);
   border: 1px solid rgba(255,255,255,.15);
   color: var(--white);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   font-size: 18px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .25s var(--ease);
   z-index: 2;
}

.lightbox__close:hover {
   background: rgba(255,255,255,.2);
}

.lightbox__nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255,255,255,.08);
   border: 1px solid rgba(255,255,255,.12);
   color: var(--white);
   width: 48px;
   height: 48px;
   border-radius: 50%;
   font-size: 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .25s var(--ease);
   z-index: 2;
}

.lightbox__nav:hover {
   background: rgba(196,162,101,.25);
   border-color: var(--gold-border);
}

.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

/* GALLERY RESPONSIVE */
@media (max-width: 768px) {
   .gallery__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }
   .gallery__filter {
      padding: 8px 16px;
      font-size: 12px;
   }
   .lightbox__nav--prev { left: 12px; }
   .lightbox__nav--next { right: 12px; }
   .lightbox { padding: 20px; }
}

@media (max-width: 480px) {
   .gallery__grid {
      grid-template-columns: 1fr 1fr;
      gap: 8px;
   }
}

/* ============================================
   PREPARATION SECTION (service pages)
   ============================================ */
.sp-preparation {
   padding: var(--section-pad) 0;
   background: var(--bg-light);
}

.sp-preparation__header {
   text-align: center;
   margin-bottom: 50px;
}

.sp-preparation__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   max-width: 900px;
   margin: 0 auto;
}

.sp-prep-item {
   display: flex;
   gap: 18px;
   align-items: flex-start;
   background: var(--white);
   border: 1px solid var(--gold-border);
   border-radius: var(--radius);
   padding: 28px 24px;
   transition: all .4s var(--ease);
}

.sp-prep-item:hover {
   border-color: var(--gold);
   box-shadow: var(--shadow-gold);
   transform: translateY(-2px);
}

.sp-prep-item__icon {
   width: 48px;
   height: 48px;
   min-width: 48px;
   border-radius: 12px;
   background: rgba(196, 162, 101, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   color: var(--gold);
}

.sp-prep-item__title {
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 6px;
}

.sp-prep-item__text {
   font-size: 14px;
   line-height: 1.7;
   color: var(--text-dark-soft);
}

@media (max-width: 768px) {
   .sp-preparation__grid {
      grid-template-columns: 1fr;
      max-width: 420px;
   }
}