:root {
  --bg: #09090c;
  --bg-soft: #101015;
  --card: rgba(22, 22, 28, 0.88);
  --card-hover: rgba(30, 30, 38, 0.96);

  --white: #f7f7f8;
  --text: #e7e7eb;
  --muted: #9d9da8;

  --purple: #a855f7;
  --purple-light: #d49cff;
  --purple-dark: #6d28d9;

  --red: #ef3158;
  --red-light: #ff6685;

  --border: rgba(255, 255, 255, 0.11);
  --border-purple: rgba(168, 85, 247, 0.35);

  --shadow: 0 25px 70px rgba(0, 0, 0, 0.45);

  --radius: 22px;
}


/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(168, 85, 247, 0.17),
      transparent 35%
    ),
    radial-gradient(
      circle at 10% 35%,
      rgba(239, 49, 88, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 65%,
      rgba(168, 85, 247, 0.08),
      transparent 30%
    ),
    #09090c;

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x: hidden;
}


/* =========================
   DELIKATNY BROKAT TŁA
========================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(212,156,255,.35) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(239,49,88,.28) 0 1px, transparent 1.5px);

  background-size:
    145px 145px,
    220px 220px,
    280px 280px;

  background-position:
    20px 40px,
    90px 120px,
    170px 20px;

  opacity: 0.35;
}


/* =========================
   RUCHOME ISKIERKI
========================= */

.luxury-particles {
  position: fixed;
  inset: 0;

  pointer-events: none;
  overflow: hidden;

  z-index: 1;
}

.particle {
  position: absolute;

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

  font-size: 13px;

  text-shadow:
    0 0 6px rgba(255,255,255,.8),
    0 0 15px rgba(168,85,247,.65);

  opacity: 0;

  animation:
    sparkleFloat 7s ease-in-out infinite,
    sparkleBlink 2.8s ease-in-out infinite;
}

.p1  { left: 7%;  top: 18%; animation-delay: 0s, .4s; }
.p2  { left: 17%; top: 62%; animation-delay: 1.4s, 1.1s; }
.p3  { left: 28%; top: 28%; animation-delay: 3s, .2s; }
.p4  { left: 38%; top: 75%; animation-delay: 2s, 1.7s; }
.p5  { left: 48%; top: 12%; animation-delay: 4s, .8s; }
.p6  { left: 58%; top: 48%; animation-delay: .7s, 2s; }
.p7  { left: 68%; top: 82%; animation-delay: 2.8s, .3s; }
.p8  { left: 77%; top: 25%; animation-delay: 1.8s, 1.5s; }
.p9  { left: 87%; top: 57%; animation-delay: 3.7s, .6s; }
.p10 { left: 94%; top: 16%; animation-delay: 1.2s, 2.2s; }
.p11 { left: 12%; top: 88%; animation-delay: 4.5s, 1s; }
.p12 { left: 82%; top: 90%; animation-delay: 2.5s, 1.8s; }
.p13 { left: 33%; top: 50%; animation-delay: 2.3s, .9s; }
.p14 { left: 63%; top: 20%; animation-delay: 3.8s, 1.6s; }
.p15 { left: 91%; top: 38%; animation-delay: 1.6s, .5s; }
.p16 { left: 5%;  top: 45%; animation-delay: 4.2s, 2.1s; }
.p17 { left: 73%; top: 68%; animation-delay: 2.1s, 1.3s; }
.p18 { left: 45%; top: 91%; animation-delay: 3.3s, .7s; }


@keyframes sparkleFloat {
  0% {
    transform: translateY(30px) translateX(0) rotate(0deg);
  }

  50% {
    transform: translateY(-25px) translateX(12px) rotate(90deg);
  }

  100% {
    transform: translateY(30px) translateX(0) rotate(180deg);
  }
}


@keyframes sparkleBlink {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(.65);
  }

  45% {
    opacity: 0.95;
    transform: scale(1.35);
  }

  60% {
    opacity: 0.3;
    transform: scale(.85);
  }
}


/* =========================
   FLOATING CARDS
========================= */

.floating-cards {
  position: fixed;
  inset: 0;

  pointer-events: none;
  overflow: hidden;

  z-index: 0;
}

.floating-card {
  position: absolute;

  font-family: Georgia, serif;

  font-size: 26px;

  opacity: 0.1;

  filter:
    drop-shadow(0 0 8px rgba(168,85,247,.35));

  animation: cardFloat 13s linear infinite;
}

.card-heart {
  color: #ef3158;
}

.card-diamond {
  color: #d49cff;
}

.card-spade,
.card-club {
  color: #fff;
}


/* 16 KART W TLE */

.fc1  { left: 4%;  bottom: -60px; animation-delay: 0s; }
.fc2  { left: 12%; bottom: -70px; animation-delay: 3s; }
.fc3  { left: 20%; bottom: -55px; animation-delay: 6s; }
.fc4  { left: 29%; bottom: -80px; animation-delay: 9s; }

.fc5  { left: 37%; bottom: -60px; animation-delay: 2s; }
.fc6  { left: 45%; bottom: -70px; animation-delay: 7s; }
.fc7  { left: 53%; bottom: -55px; animation-delay: 4s; }
.fc8  { left: 61%; bottom: -80px; animation-delay: 11s; }

.fc9  { left: 69%; bottom: -60px; animation-delay: 5s; }
.fc10 { left: 77%; bottom: -70px; animation-delay: 1s; }
.fc11 { left: 84%; bottom: -55px; animation-delay: 8s; }
.fc12 { left: 92%; bottom: -80px; animation-delay: 12s; }

.fc13 {
  left: 16%;
  bottom: -40px;
  font-size: 18px;
  animation-delay: 10s;
}

.fc14 {
  left: 34%;
  bottom: -45px;
  font-size: 20px;
  animation-delay: 5s;
}

.fc15 {
  left: 70%;
  bottom: -45px;
  font-size: 19px;
  animation-delay: 1.5s;
}

.fc16 {
  left: 88%;
  bottom: -40px;
  font-size: 18px;
  animation-delay: 7.5s;
}


@keyframes cardFloat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }

  12% {
    opacity: .12;
  }

  50% {
    opacity: .18;
  }

  88% {
    opacity: .08;
  }

  100% {
    transform: translateY(-115vh) rotate(180deg);
    opacity: 0;
  }
}


/* =========================
   MAIN
========================= */

main {
  position: relative;
  z-index: 2;

  width: min(1120px, calc(100% - 32px));

  margin: 0 auto;
}


/* =========================
   HERO
========================= */

.hero {
  min-height: 760px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding:
    70px
    0
    85px;
}


.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  color: var(--purple-light);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .32em;

  margin-bottom: 20px;

  opacity: .85;
}

.hero-kicker span {
  width: 25px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--purple)
    );
}

.hero-kicker span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--purple),
      transparent
    );
}


.hero h1 {
  margin: 0;

  color: var(--white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(38px, 7vw, 72px);

  line-height: .98;

  letter-spacing: -.04em;

  text-shadow:
    0 0 35px rgba(168,85,247,.15);
}


.hero-subtitle {
  position: relative;

  max-width: 580px;

  margin: 24px auto 32px;

  padding: 20px 24px;

  color: #c7c7d0;

  font-size: 14px;

  line-height: 1.75;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(168, 85, 247, 0.08),
      rgba(239, 49, 88, 0.045),
      rgba(255, 255, 255, 0.025)
    );

  border: 1px solid rgba(168, 85, 247, 0.28);

  border-radius: 18px;

  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.25),
    0 0 28px rgba(168, 85, 247, 0.06);
}

.hero-subtitle::before {
  content: "✦";

  position: absolute;

  top: 8px;
  left: 13px;

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

  font-size: 11px;
}

.hero-subtitle::after {
  content: "✦";

  position: absolute;

  right: 13px;
  bottom: 8px;

  color: rgba(239, 49, 88, 0.65);

  font-size: 11px;
}

/* =========================
   ZDJĘCIE
   BEZ ANIMACJI
========================= */

.portrait-wrap {
  position: relative;

  width: 280px;
  height: 348px;

  margin:
    10px auto
    24px;

  padding: 4px;

  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.8),
      rgba(239, 49, 88, 0.55),
      rgba(255, 255, 255, 0.2)
    );

  border-radius: 28px;

  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.6),
    0 0 70px rgba(168, 85, 247, 0.12);

  flex-shrink: 0;
}


.portrait-wrap img {
  position: relative;
  z-index: 2;

  width: 272px !important;
  height: 340px !important;

  max-width: 272px !important;
  max-height: 340px !important;

  min-width: 272px !important;

  display: block;

  margin: 0 auto;

  object-fit: cover;

  border-radius: 24px;

  background: #111116;
}


/* =========================
   ONLINE
========================= */

.online {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex-direction: row !important;

  width: auto !important;
  height: auto !important;

  gap: 9px !important;

  margin:
    0 auto
    10px !important;

  padding:
    8px 15px !important;

  border:
    1px solid rgba(80, 255, 150, 0.35) !important;

  border-radius: 999px !important;

  background:
    rgba(20, 40, 27, 0.65) !important;

  color: #a7e9bb !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: .14em !important;

  white-space: nowrap !important;

  box-shadow:
    0 0 18px rgba(80, 255, 150, 0.06) !important;

  animation: onlinePulse 3s ease-in-out infinite;
}


.online i {
  flex: 0 0 7px !important;

  width: 7px !important;
  height: 7px !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;

  background: #65e48c !important;

  box-shadow:
    0 0 10px rgba(101, 228, 140, 0.8) !important;

  animation: onlineDot 2s ease-in-out infinite;
}


@keyframes onlinePulse {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(80,255,150,.05);
  }

  50% {
    box-shadow:
      0 0 25px rgba(80,255,150,.18);
  }
}


@keyframes onlineDot {
  0%,
  100% {
    opacity: .65;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}


.hero-text {
  margin: 0;

  color: var(--muted);

  font-size: 13px;
}


.hero-kiss {
  margin-top: 17px;

  font-size: 20px;

  filter:
    drop-shadow(0 0 12px rgba(239,49,88,.35));

  animation:
    kissPulse 3s ease-in-out infinite;
}


@keyframes kissPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: .75;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}


/* =========================
   SEKCJE
========================= */

.section {
  position: relative;

  padding:
    70px 0;
}


.section-heading {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-bottom: 28px;
}


.section-number {
  color: var(--purple-light);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .2em;

  opacity: .75;
}


.section-heading h2 {
  position: relative;

  margin: 0;

  color: var(--white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(27px, 4vw, 39px);

  font-weight: 500;

  letter-spacing: -.025em;
}


.section-heading h2::after {
  content: "✦";

  display: inline-block;

  margin-left: 10px;

  color: var(--purple-light);

  font-family: Georgia, serif;

  font-size: 13px;

  vertical-align: middle;

  animation: headingSparkle 2.8s ease-in-out infinite;
}


@keyframes headingSparkle {
  0%,
  100% {
    opacity: .2;
    transform: scale(.7) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.25) rotate(25deg);
  }
}


/* =========================
   LINK CARDS
========================= */

.link-grid {
  display: grid;

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

  gap: 15px;
}


.link-card {
  position: relative;

  min-height: 126px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 21px;

  overflow: hidden;

  color: inherit;
  text-decoration: none;

  background:
    linear-gradient(
      145deg,
      rgba(27,27,35,.94),
      rgba(16,16,21,.92)
    );

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

  border-radius: var(--radius);

  box-shadow:
    0 20px 50px rgba(0,0,0,.25);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


.link-card::before,
.social-card::before,
.offer::before {
  content: "";

  position: absolute;

  top: -80%;
  left: -70%;

  width: 45%;
  height: 260%;

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

  transform: rotate(22deg);

  opacity: 0;

  transition: opacity .25s ease;
}


.link-card::after,
.social-card::after {
  content: "✦";

  position: absolute;

  right: 15px;
  top: 11px;

  color: rgba(212,156,255,.55);

  font-size: 10px;

  opacity: .2;

  animation: cardStar 3.5s ease-in-out infinite;
}


.link-card:hover,
.social-card:hover,
.offer:hover {
  transform: translateY(-5px);

  border-color:
    rgba(168,85,247,.42);

  box-shadow:
    0 25px 60px rgba(0,0,0,.38),
    0 0 35px rgba(168,85,247,.08);
}


.link-card:hover::before,
.social-card:hover::before,
.offer:hover::before {
  opacity: 1;

  animation: cardShimmer 1.2s ease forwards;
}


@keyframes cardShimmer {
  from {
    left: -70%;
  }

  to {
    left: 150%;
  }
}


@keyframes cardStar {
  0%,
  100% {
    opacity: .15;
    transform: scale(.7) rotate(0deg);
  }

  50% {
    opacity: .9;
    transform: scale(1.25) rotate(20deg);
  }
}


.link-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 13px;

  background:
    rgba(168,85,247,.12);

  color: var(--purple-light);
}


.link-icon svg {
  width: 23px;
  height: 23px;

  display: block;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.55;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .3s ease,
    color .3s ease;
}


.link-card:hover .link-icon svg {
  color: #fff;

  transform: scale(1.08);
}


.link-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 6px;
}


.link-content strong {
  color: var(--white);

  font-size: 14px;

  font-weight: 700;
}


.link-content small {
  color: var(--muted);

  font-size: 11px;

  line-height: 1.5;
}


.arrow {
  margin-left: auto;

  color: rgba(255,255,255,.4);

  font-size: 16px;

  transition:
    transform .3s ease,
    color .3s ease;
}


.link-card:hover .arrow {
  color: var(--purple-light);

  transform: translate(3px,-3px);
}


/* =========================
   SOCIAL
========================= */

.social-grid {
  margin-top: 12px;

  display: grid;

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

  gap: 12px;
}


.social-card {
  position: relative;

  min-height: 78px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 16px 17px;

  overflow: hidden;

  color: inherit;
  text-decoration: none;

  background:
    rgba(18,18,24,.78);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 18px;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.social-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 12px;

  background:
    rgba(255,255,255,.045);

  color: #d9d9df;
}


.social-icon svg {
  width: 22px;
  height: 22px;

  display: block;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.55;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .3s ease,
    color .3s ease;
}


.social-card > span:nth-child(2) {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.social-card strong {
  color: var(--white);

  font-size: 13px;
}


.social-card small {
  color: var(--muted);

  font-size: 10px;
}


.social-card b {
  margin-left: auto;

  color: rgba(255,255,255,.35);

  font-size: 14px;
}


.social-card:hover .social-icon svg {
  color: var(--purple-light);

  transform: scale(1.08);
}


/* =========================
   OFERTY
========================= */

.offer-grid {
  display: grid;

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

  gap: 15px;
}


.offer {
  position: relative;

  min-height: 300px;

  padding: 26px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(27,27,35,.94),
      rgba(15,15,20,.95)
    );

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

  border-radius: var(--radius);

  box-shadow:
    0 20px 50px rgba(0,0,0,.25);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


.offer::after {
  content: "";

  position: absolute;

  right: -80px;
  bottom: -90px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background:
    rgba(168,85,247,.12);

  filter: blur(35px);

  pointer-events: none;

  transition:
    transform .5s ease,
    opacity .5s ease;
}


.offer:hover::after {
  transform: scale(1.25);

  opacity: .9;
}


.offer-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 26px;
}


.offer-number {
  color: var(--purple-light);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .2em;
}


.offer-symbol {
  color: rgba(255,255,255,.75);

  font-size: 20px;

  text-shadow:
    0 0 15px rgba(168,85,247,.45);

  animation:
    symbolSparkle 3.5s ease-in-out infinite;
}


@keyframes symbolSparkle {
  0%,
  100% {
    opacity: .55;
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.12) rotate(5deg);
  }
}


.offer h3 {
  position: relative;
  z-index: 2;

  margin:
    0
    0
    15px;

  color: var(--white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 22px;

  font-weight: 500;

  line-height: 1.15;
}


.offer p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.75;
}


.offer-line {
  position: absolute;

  left: 26px;
  bottom: 24px;

  width: 38px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--purple),
      transparent
    );

  opacity: .8;
}


/* =========================
   KONTAKT
========================= */

.contact-section {
  position: relative;

  margin:
    35px 0
    80px;

  padding:
    65px 30px;

  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(168,85,247,.13),
      transparent 42%
    ),
    rgba(15,15,20,.82);

  border:
    1px solid rgba(168,85,247,.18);

  border-radius: 30px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.4);
}


.contact-glow {
  position: absolute;

  left: 50%;
  top: -120px;

  width: 280px;
  height: 280px;

  transform: translateX(-50%);

  background:
    rgba(168,85,247,.12);

  filter: blur(70px);

  pointer-events: none;

  animation:
    contactGlow 5s ease-in-out infinite;
}


@keyframes contactGlow {
  0%,
  100% {
    opacity: .45;
    transform: translateX(-50%) scale(.9);
  }

  50% {
    opacity: .85;
    transform: translateX(-50%) scale(1.1);
  }
}


.contact-kicker {
  position: relative;
  z-index: 2;

  color: var(--purple-light);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .28em;
}


.contact-section h2 {
  position: relative;
  z-index: 2;

  margin:
    15px 0
    14px;

  color: var(--white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(34px, 5vw, 48px);

  font-weight: 500;
}


.contact-section p {
  position: relative;
  z-index: 2;

  max-width: 500px;

  margin:
    0 auto
    28px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.7;
}


.contact-button {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;

  gap: 16px;

  padding:
    14px 20px;

  color: #fff;

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .12em;

  background:
    linear-gradient(
      135deg,
      rgba(168,85,247,.85),
      rgba(239,49,88,.78)
    );

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 999px;

  box-shadow:
    0 15px 40px rgba(168,85,247,.18);

  overflow: hidden;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.contact-button::before {
  content: "";

  position: absolute;

  top: -80%;
  left: -80%;

  width: 45%;
  height: 260%;

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

  transform: rotate(22deg);
}


.contact-button:hover::before {
  animation: buttonShimmer 1s ease forwards;
}


@keyframes buttonShimmer {
  from {
    left: -80%;
  }

  to {
    left: 150%;
  }
}


.contact-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 20px 55px rgba(168,85,247,.3);
}


.contact-button b {
  font-size: 14px;
}


/* =========================
   GALERIA
========================= */

.gallery-section {
  padding-top: 0;
}


.gallery-intro {
  margin:
    -10px
    0
    24px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.6;
}


.gallery-grid {
  display: grid;

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

  gap: 15px;
}


.gallery-item {
  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(27,27,35,.94),
      rgba(15,15,20,.95)
    );

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

  border-radius: 20px;

  box-shadow:
    0 20px 50px rgba(0,0,0,.25);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


.gallery-item::after {
  content: "✦";

  position: absolute;

  right: 13px;
  top: 10px;

  color: rgba(255,255,255,.7);

  font-size: 11px;

  opacity: .35;

  pointer-events: none;
}


.gallery-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .5s ease,
    filter .5s ease;
}


.gallery-item:hover {
  transform: translateY(-5px);

  border-color:
    rgba(168,85,247,.4);

  box-shadow:
    0 25px 60px rgba(0,0,0,.4),
    0 0 30px rgba(168,85,247,.08);
}


.gallery-item:hover img {
  transform: scale(1.04);
}


.gallery-note {
  margin:
    20px 0
    0;

  color: #777783;

  font-size: 11px;

  line-height: 1.6;
}


/* =========================
   FOOTER
========================= */

footer {
  position: relative;

  padding:
    35px 0
    55px;

  text-align: center;
}


.footer-logo {
  color: var(--white);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: .2em;
}


.footer-logo span {
  color: var(--purple-light);
}


footer p {
  margin: 10px 0 0;

  color: #666672;

  font-size: 10px;
}


.footer-kiss {
  margin-top: 12px;

  font-size: 14px;

  opacity: .65;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 850px) {

  .link-grid,
  .social-grid,
  .offer-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .hero {
    min-height: auto;

    padding:
      60px 0
      75px;
  }

  .portrait-wrap {
    margin-top: 18px;
  }

  .section {
    padding:
      55px 0;
  }

}


@media (max-width: 560px) {

  main {
    width:
      min(100% - 22px, 1120px);
  }

  .hero {
    padding-top: 45px;
  }

  .hero h1 {
    font-size: 39px;
  }

  .hero-subtitle {
    font-size: 13px;

    padding: 0 8px;
  }

  .portrait-wrap {
    width: 280px;
    height: 348px;
  }

  .link-card {
    min-height: 118px;

    padding: 18px;
  }

  .link-content small {
    font-size: 10px;
  }

  .offer {
    min-height: 280px;

    padding: 23px;
  }

  .contact-section {
    margin:
      20px 0
      55px;

    padding:
      50px 20px;
  }

  .gallery-grid {
    gap: 10px;
  }

  .gallery-item {
    border-radius: 16px;
  }

  .floating-card {
    font-size: 20px;
  }

  .particle {
    font-size: 10px;
  }

}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }

} 
/* =========================
   FEATURED PHOTO
========================= */

.featured-photo-section {
  padding-top: 10px;
  padding-bottom: 70px;
}

.featured-photo {
  width: 100%;
  max-width: 900px;
  height: 300px;
  margin: 0 auto;
  padding: 3px;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.75),
    rgba(239, 49, 88, 0.55),
    rgba(255, 255, 255, 0.18)
  );
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.55),
    0 0 50px rgba(168, 85, 247, 0.08);
  overflow: hidden;
}

.featured-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 21px;
  background: #111116;
}

/* TELEFON */

@media (max-width: 600px) {
  .featured-photo {
    height: 210px;
    border-radius: 20px;
  }

  .featured-photo img {
    border-radius: 17px;
  }
}