/* ── BASE & VARIABLES ── */
:root {
  --bg-dark: #0d0d0d;
  --bg-card: #ffffff;
  --text-main: #ffffff;
  --text-dark: #0d0d0d;
  --accent: #e8533a;
  --font-sans: 'Satoshi', sans-serif;
  --font-serif: 'Playfair Display', serif;
}

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

body.dark-mode {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── ULTRA-CLEAN MINIMALIST BRAND SCROLLBAR ── */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* WebKit (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-track-piece {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff6b4a;
  box-shadow: 0 0 10px rgba(232, 83, 58, 0.6);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html.loading-lock,
body.loading-lock {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
  touch-action: none !important;
  user-select: none;
}

a {
  text-decoration: none;
  color: inherit;
}

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

/* ── CURSOR (FIGMA MULTIPLAYER STYLE) ── */
body,
a,
button,
[role="button"],
input,
select,
textarea {
  cursor: none !important;
  /* Hide native cursor for full figma experience */
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translate(0, 0);
  /* Let JS exactly map the tip of the arrow */
  transition: opacity 0.2s ease;
}

.figma-cursor-svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transform: rotate(-15deg);
}

.figma-cursor-tag {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 2px 8px 8px 8px;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(232, 83, 58, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s;
}

/* Hover States */
.cursor.hov .figma-cursor-tag {
  transform: scale(0.85);
  opacity: 0.9;
}

.cursor-ring.hov {
  width: 44px;
  height: 44px;
  border-color: var(--accent);
  border-width: 1px;
}

/* ── PRELOADER ── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.preloader.gone,
html.skip-preloader .preloader,
html.skip-preloader #preloader {
  /* Pure Cinematic Zoom Dissolve (No programmatic clip-path splits) */
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ambient Glow / Pulse in the center */
.pl-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 83, 58, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
  filter: blur(40px);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s ease;
}

/* Cinematic Word Wrap */
.pl-word-wrap {
  position: relative;
  z-index: 3;
  overflow: hidden;
  height: clamp(4rem, 12vw, 10rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── NEW PREMIUM CINEMATIC PRELOADER ── */

/* Film grain canvas overlay */
.pl-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.065;
  mix-blend-mode: screen;
}

/* Horizontal scanning glow line */
.pl-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(232, 83, 58, 0.0) 15%,
      rgba(232, 83, 58, 0.7) 50%,
      rgba(232, 83, 58, 0.0) 85%,
      transparent 100%);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  box-shadow: 0 0 20px rgba(232, 83, 58, 0.4);
  transition: top 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.5s ease;
}

.pl-scan-line.active {
  opacity: 1;
  top: 80%;
}

/* Progress bar */
.pl-progress {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 5;
  pointer-events: none;
}

.pl-progress-bar {
  width: 180px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
}

.pl-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 1px;
  transition: width 0.15s ease;
  box-shadow: 0 0 8px rgba(232, 83, 58, 0.8);
}

.pl-progress-num {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.12em;
  min-width: 38px;
}

.pl-huge-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: clamp(10rem, 30vw, 40rem);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.pl-huge-progress.exiting {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

.pl-sentence-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 95%;
  max-width: 1100px;
}

/* ── Typographic Sentence Assembly ── */
.pl-sentence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  font-family: var(--font-sans);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: center;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Clip row for words to reveal flawlessly without overlapping */
.pl-word-row {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 22px);
  overflow: hidden;
  padding: 0.05em 0 0.15em 0;
  perspective: 800px;
  transform-style: preserve-3d;
}

/* Modern Word-by-Word 3D Perspective Standup: highly creative and premium */
.pl-word {
  display: inline-block;
  position: relative;
  z-index: 3;
  /* Render standard text in foreground layer */
  transform: rotateX(85deg) translateY(45px) translateZ(-20px);
  transform-origin: bottom center;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active = beautifully in view, completely clean, upright and stable */
.pl-word.active {
  transform: rotateX(0deg) translateY(0) translateZ(0);
  opacity: 1;
}

/* Real Highlighter Marker Effect: sweeps left-to-right, highlights, and tilts horizontally like a real marker scratch! */
.pl-word.highlight {
  font-weight: 900;
  position: relative;
  z-index: 2;
  /* Render behind standard sibling text but in front of pseudo-element stroke */
  display: inline-block;
  color: #fff;
  /* Neutralize global .highlight overrides to prevent pre-highlighted state */
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: rotateX(85deg) translateY(45px) translateZ(-20px);
}

.pl-word.highlight.active {
  transform: rotateX(0deg) translateY(0) translateZ(0);
}

.pl-word.highlight::after {
  content: '';
  position: absolute;
  /* Slightly organic/rough padding around the text to feel wide and thick */
  top: -2px;
  bottom: -2px;
  left: -14px;
  right: -14px;
  background: var(--accent);
  /* Solid terracotta brand primary accent color */
  /* Real handwritten marker aesthetic: slightly uneven rounded corners and a realistic tilt */
  border-radius: 4px 6px 3px 5px;
  transform: rotate(-1.5deg) skewX(-4deg);
  /* Tilts slightly horizontally for a genuine hand-drawn highlighter stroke */
  transform-origin: left center;
  z-index: -1;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  /* Initial state: zero width clip */
  will-change: clip-path;
}

.pl-word.highlight.active::after {
  /* Sweeps from left to right, starting 0.25s after the word begins standing up, and stays! */
  animation: highlighterSweep 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.25s forwards;
}

@keyframes highlighterSweep {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }

  100% {
    /* Sweep completes fully and STAYS on the word! */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* Exit = all words fade out directly backward into the screen (Z-axis depth) */
.pl-word.exiting {
  transform: translateZ(-80px) rotateX(-15deg) translateY(-10px) !important;
  opacity: 0 !important;
  filter: blur(8px) !important;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.0s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── UX Wireframe Bounding Box ── */
.pl-ux-box {
  position: relative;
  padding: 35px 70px;
  background: rgba(255, 255, 255, 0.005);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

/* Self-drawing dragged border */
.pl-ux-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 1.5px solid var(--accent);
  background: rgba(232, 83, 58, 0.05);
  /* Slight fill to simulate selection */
  opacity: 0;
  pointer-events: none;
}

.pl-ux-box.active .pl-ux-border {
  opacity: 1;
}

.pl-ux-box.active {
  transform: scale(1);
  opacity: 1;
}

.pl-ux-box.exit {
  transform: scale(1.1) translateZ(0);
  filter: blur(12px);
  opacity: 0;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Figma Multiplayer Cursors ── */
.pl-figma-cursor {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.pl-ux-box.active .pl-figma-cursor {
  opacity: 1;
  transform: scale(1);
}

.fc-arrow {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transform: rotate(-15deg);
}

.fc-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  padding: 3px 8px;
  border-radius: 2px 8px 8px 8px;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  text-transform: uppercase;
}

.tag-terracotta {
  background: var(--accent);
}

.tag-cyan {
  background: #00c2cb;
}

/* Figma cursors are driven purely by JS — no CSS keyframes needed */
/* Initial state handled by .pl-figma-cursor above; JS drives left/top each frame */

.pl-ux-box.exit .pl-figma-cursor {
  opacity: 0 !important;
  transform: scale(0.8) !important;
  transition: transform 0.6s ease, opacity 0.5s ease;
}

/* UX Corner Control Handles (Anchor Points) */
.pl-box-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--bg-dark);
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
    opacity 0.6s ease 0.3s;
  z-index: 10;
}

.pl-ux-box.active .pl-box-handle {
  opacity: 1;
  transform: scale(1);
}

/* Position handles precisely on corners */
.handle-tl {
  top: -5px;
  left: -5px;
}

.handle-tr {
  top: -5px;
  right: -5px;
}

.handle-bl {
  bottom: -5px;
  left: -5px;
}

.handle-br {
  bottom: -5px;
  right: -5px;
}

/* Brand container inside UX Bounding Box */
.pl-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 6.2vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Very elegant initial hint text */
.pl-wait-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 300;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.pl-wait-text.active {
  opacity: 1;
}

.pl-wait-text.exiting {
  opacity: 0;
  filter: blur(5px);
}

.pl-brand-char {
  display: inline-block;
  opacity: 0;
  transform: scale(0.92) translateZ(0);
  /* Clean initial scale-in from the center! */
  color: #fff;
  position: relative;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
}

.pl-ux-box.active .pl-brand-char {
  opacity: 1;
  transform: scale(1) translateZ(0);
  /* Pristine solid white scale reveal! */
}

.pl-ux-box.exit .pl-brand-char {
  opacity: 0;
  transform: translateY(-20px) scale(1.05) translateZ(0);
  transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── HEADER (NON-STICKY / HERO-ONLY) ── */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}


.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a,
.journal-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.nav-links a:hover,
.journal-link:hover {
  color: #ffffff;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.btn-primary {
  background-color: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 100px;
  transition: background-color 0.3s;
}

.btn-primary.alt {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary.alt:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.brand-logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.brand-logo:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.site-header-logo {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

.site-footer-logo {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
}

.text-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.tl-main {
  font-family: 'Anton', var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  /* Anton is inherently ultra-bold at 400 */
  line-height: 1;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Clean, crisp wordmark spacing */
  transform: scaleY(1);
}

.tl-sub {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  /* Crisp high-contrast pure white subline */
  text-transform: uppercase;
  letter-spacing: 0.26em;
  margin-top: 3px;
  opacity: 0.95;
}

/* ── FLOATING BOTTOM NAV ── */
.float-nav {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1a1a1a;
  padding: 6px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 800;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
}

.float-nav.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.fn-links {
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 16px;
}

.fn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
  padding: 4px 6px;
}

.fn-item:hover {
  color: #fff;
}

.fn-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.fn-cta {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 12px 24px;
  border-radius: 100px;
  transition: background 0.3s;
}

.fn-cta:hover {
  background: #ff6a50;
}

/* ── HERO (HOME-B) ── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0 40px;
  background: var(--bg-dark);
  transform: scale(0.96) translateY(20px);
  filter: blur(10px);
  opacity: 0;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero.entered {
  transform: scale(1) translateY(0);
  filter: blur(0);
  opacity: 1;
}

.hero-center-cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 360px);
  height: min(120vw, 480px);
  z-index: 1;
}

.hc-card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  transform-origin: bottom center;
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.5s;
}

.hc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hc-card-3 {
  transform: rotate(0deg);
  opacity: 0.5;
}

.hc-card-2 {
  transform: rotate(0deg);
  opacity: 0.8;
}

.hc-card-1 {
  transform: rotate(0deg);
  z-index: 2;
}

.hero-title-b {
  position: relative;
  z-index: 10;
  font-size: clamp(40px, 10vw, 150px);
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.05em;
  color: #fff;
  line-height: 1;
  mix-blend-mode: difference;
  white-space: nowrap;
  pointer-events: none;
}

.ht-line {
  overflow: hidden;
  display: block;
  padding: 10px 0;
}

.ht-text {
  display: inline-block;
  transform: translateY(100%);
}

.hero-bottom-b {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5;
}

.hb-left {
  display: flex;
  align-items: center;
}

.avatars {
  display: flex;
  cursor: none !important;
}

.av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-dark);
  margin-left: -10px;
}

.av:first-child {
  margin-left: 0;
}

.av-plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px dashed var(--accent);
  margin-left: -10px;
  background: rgba(232, 83, 58, 0.08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  z-index: 5;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}

.avatars:hover .av-plus {
  background: var(--accent);
  color: #fff;
  transform: scale(1.06);
}

.av1 {
  background: url('images/project-travel.png') center/cover;
}

.av2 {
  background: url('images/project-health.png') center/cover;
}

.av3 {
  background: url('images/project-nft.png') center/cover;
}

.hb-left p {
  font-size: 13px;
  color: #fff;
  margin-left: 16px;
  line-height: 1.4;
}

.hb-center {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.hbc-icons {
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 6px;
  margin-right: 6px;
}

.hbc-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s, background 0.3s;
  border-radius: 6px;
}

.hbc-icon:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.hbc-btn {
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 6px;
  transition: opacity 0.3s;
}

.hbc-btn:hover {
  opacity: 0.8;
}

.hb-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero-contact-link {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  position: relative;
  padding-bottom: 4px;
}

.hero-contact-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s;
}

.hero-contact-link:hover::after {
  background-color: #fff;
}

/* ── TICKER ── */
.ticker-section {
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  background: var(--bg-dark);
}

.ticker-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  align-items: center;
  animation: scrollTicker 15s linear infinite;
}

.ticker-item {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
  color: #fff;
}

.ticker-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

@keyframes scrollTicker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Adjust based on duplication */

/* ── STATEMENT ── */
.statement-section {
  padding: 150px 40px;
  display: flex;
  justify-content: center;
}

.statement-container {
  max-width: 1200px;
}

.statement-text {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.highlight {
  background-color: var(--accent);
  color: #fff;
  padding: 0 10px;
  border-radius: 4px;
  display: inline-block;
  transform: rotate(-1deg);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

[data-reveal].shown {
  opacity: 1;
  transform: translateY(0);
}

/* ── LOGOS ── */
.logos-section {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
}

.logos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.logo-box {
  padding: 40px 20px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s;
}

.logo-box:last-child {
  border-right: none;
}

.logo-box:hover {
  color: #fff;
}

@media (max-width: 900px) {
  .logos-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .logo-box {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
}

/* ── 3D SERVICES SCROLL ── */
.services-section {
  height: 300vh;
  position: relative;
}

.services-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1200px;
}

.svc-wheel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.svc-item {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: clamp(2.5rem, 5.8vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center center;
  line-height: 1.2;
}

.svc-item.active {
  color: #fff;
  -webkit-text-stroke: 0;
  transform: rotateX(0deg) translateZ(0) translateY(0);
  opacity: 1;
  z-index: 5;
}

.svc-item.above-1 {
  transform: rotateX(20deg) translateZ(-60px) translateY(-170px);
  opacity: 0.35;
  z-index: 4;
}

.svc-item.below-1 {
  transform: rotateX(-20deg) translateZ(-60px) translateY(170px);
  opacity: 0.35;
  z-index: 4;
}

.svc-item.above-2,
.svc-item.below-2,
.svc-item.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── WORKS GRID ── */
.works-section {
  padding: 150px 5%;
  background: var(--bg-dark);
}

.works-container {
  max-width: 1400px;
  margin: 0 auto;
}

.works-section-title {
  font-size: clamp(60px, 12vw, 150px);
  font-weight: 900;
  line-height: 0.85;
  margin-bottom: 120px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.works-grid {
  display: flex;
  flex-direction: column;
  gap: 150px;
  align-items: center;
}

.works-grid .work-card {
  width: 521px;
  max-width: 100%;
}

@media (max-width: 900px) {
  .works-grid {
    gap: 80px;
  }
}

.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.works-grid:hover .work-card:not(:hover) {
  opacity: 0.3;
  transform: scale(0.98);
}

.wc-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  /* Premium portrait ratio */
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 32px;
}

.wc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), filter 0.3s ease;
}

.work-card:hover .wc-img-wrap img {
  transform: scale(1);
  filter: brightness(0.8);
}

.wc-tags {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wc-tag {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.wc-title {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.wc-desc {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 900px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
}

/* ── CHALLENGE (FLOATING) ── */
.challenge-section {
  height: 200vh;
  position: relative;
  background: var(--bg-dark);
}

.challenge-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.challenge-bg-text {
  position: absolute;
  font-size: clamp(4rem, 12vw, 15rem);
  font-weight: 900;
  line-height: 0.85;
  text-align: center;
  color: rgba(255, 255, 255, 0.03);
  text-transform: uppercase;
  z-index: 1;
}

.float-images {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.f-img {
  position: absolute;
  width: 30vw;
  max-width: 400px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.f-img img {
  width: 100%;
  height: auto;
}

.fi-1 {
  top: 15%;
  left: 10%;
}

.fi-2 {
  top: 40%;
  right: 10%;
  width: 25vw;
}

.fi-3 {
  bottom: 10%;
  left: 30%;
  width: 35vw;
}

/* ── FOOTER ── */
.footer-section {
  background: var(--accent);
  color: #fff;
  padding: 120px 40px 40px;
  border-radius: 40px 40px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 10;
}

.footer-cta {
  max-width: 800px;
  margin-bottom: 120px;
}

.cta-title {
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.cta-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
}

.cta-desc {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 50px;
  max-width: 500px;
  margin-inline: auto;
  line-height: 1.5;
}

.cta-btn {
  font-size: 24px;
  font-weight: 700;
  border-bottom: 2px solid #fff;
  padding-bottom: 5px;
  transition: opacity 0.3s;
}

.cta-btn:hover {
  opacity: 0.7;
}

.footer-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.f-logo {
  font-family: 'Anton', var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  display: inline-flex;
  transition: color 0.3s;
}

.f-logo:hover {
  color: #ffffff;
}

.fb-links {
  display: flex;
  gap: 30px;
}

.fb-links a,
.fb-socials a {
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.3s;
}

.fb-links a:hover,
.fb-socials a:hover {
  opacity: 0.7;
}

.fb-socials {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 30px;
  }
}

/* ── FIGMA CUSTOM PROMPT MODAL ── */
.figma-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.figma-prompt-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.fpm-card {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.92);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.figma-prompt-modal.active .fpm-card {
  transform: scale(1);
}

.fpm-figma-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232, 83, 58, 0.12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.fpm-card h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.fpm-card p {
  font-size: 13px;
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 24px;
}

.fpm-input-wrap {
  display: flex;
  gap: 10px;
}

.fpm-input-wrap input {
  flex: 1;
  background: #2b2b2b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px 16px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.3s;
}

.fpm-input-wrap input:focus {
  border-color: var(--accent);
}

.fpm-input-wrap button {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  padding: 0 24px;
  letter-spacing: 0.05em;
  cursor: none !important;
  /* Matches overall custom cursor experience */
  transition: background 0.3s, transform 0.2s;
}

.fpm-input-wrap button:hover {
  background: #ff684f;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────────
   ── PREMIUM RESPONSIVE OVERHAUL (MOBILE, TABLET, AND TOUCH DEVICES) ──
   ───────────────────────────────────────────────────────────────────────── */

/* ── TOUCH & MOBILE DEVICE CURSOR RESTORATION ── */
@media (hover: none) or (pointer: coarse) or (max-width: 1024px) {

  body,
  a,
  button,
  [role="button"],
  input,
  select,
  textarea,
  .service-pill,
  .gs-btn-back,
  .gs-btn-next,
  .budget-slider,
  .budget-slider::-webkit-slider-thumb {
    cursor: auto !important;
  }

  .cursor,
  .cursor-ring {
    display: none !important;
  }
}

/* ── TABLET & SMALL LAPTOP VIEWPORT OVERRIDES (<= 1024px) ── */
@media (max-width: 1024px) {

  /* Works Section Responsive Overrides */
  .works-container {
    flex-direction: column !important;
    gap: 60px !important;
  }

  .works-left {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .works-left p {
    margin-bottom: 12px !important;
  }

  .works-left h2 {
    font-size: clamp(32px, 6vw, 56px) !important;
    margin-bottom: 16px !important;
  }

  .works-left p:last-child {
    max-width: 500px !important;
  }

  .works-grid {
    width: 100% !important;
    gap: 60px !important;
  }

  .works-grid .work-card {
    width: 100% !important;
    max-width: 480px !important;
  }

  .wc-img-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    margin-bottom: 24px !important;
  }

  .wc-info {
    margin-top: 20px !important;
    text-align: left !important;
  }

  .wc-title {
    font-size: clamp(24px, 5vw, 32px) !important;
    margin-bottom: 10px !important;
  }

  .wc-desc {
    font-size: 16px !important;
  }

  .works-grid:hover .work-card:not(:hover) {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}

/* ── MOBILE VIEWPORT OVERRIDES (<= 768px) ── */
@media (max-width: 768px) {

  /* Header mobile adjustment */
  .header {
    padding: 16px 20px !important;
  }

  .tl-main {
    font-size: 22px !important;
  }

  .tl-sub {
    font-size: 7px !important;
    letter-spacing: 0.18em !important;
  }

  .btn-primary {
    font-size: 12px !important;
    padding: 10px 18px !important;
  }

  /* Hero bottom stacking and alignment */
  .hero {
    padding: 0 20px !important;
  }

  .hero-bottom-b {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(50% + min(56vw, 185px) + 24px) !important;
    /* Position mathematically below phone card stack */
    bottom: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .hb-left {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .hb-left p {
    margin-left: 0 !important;
    font-size: 12px !important;
  }

  .hb-right {
    align-items: center !important;
  }

  .hero-contact-link {
    font-size: 13px !important;
  }

  /* Hero card stack scaling */
  .hero-center-cards {
    width: min(85vw, 280px) !important;
    height: min(112vw, 370px) !important;
  }

  /* Floating Nav mobile styling */
  .float-nav {
    bottom: 20px !important;
    padding: 4px !important;
    max-width: 92vw !important;
  }

  .fn-links {
    padding: 0 6px !important;
    gap: 8px !important;
  }

  .fn-item {
    padding: 4px 5px !important;
  }

  .fn-cta {
    padding: 10px 14px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* Statement Section mobile text */
  .statement-section {
    padding: 80px 20px !important;
  }

  .statement-text {
    font-size: clamp(1.8rem, 5vw, 2.8rem) !important;
  }

  /* Ticker items scaling */
  .ticker-section {
    padding: 24px 0 !important;
  }

  .ticker-item {
    font-size: clamp(1.2rem, 3.5vw, 1.8rem) !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }

  .ticker-item .dot {
    width: 8px !important;
    height: 8px !important;
  }

  /* Footer mobile optimization */
  .footer-section {
    padding: 80px 20px 30px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .footer-cta {
    margin-bottom: 60px !important;
  }

  .cta-title {
    font-size: clamp(36px, 9vw, 64px) !important;
  }

  .cta-desc {
    font-size: 15px !important;
    margin-bottom: 30px !important;
  }

  .footer-cta div {
    gap: 20px !important;
  }

  .cta-btn {
    font-size: 16px !important;
  }

  .f-logo {
    font-size: 14px !important;
  }

  .fb-links {
    gap: 20px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .fb-socials {
    gap: 16px !important;
  }

  /* Bounding Box personalization modal */
  .fpm-card {
    padding: 24px !important;
  }

  .fpm-card h3 {
    font-size: 18px !important;
  }

  .fpm-input-wrap {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .fpm-input-wrap button {
    padding: 12px 0 !important;
    width: 100% !important;
  }
}

/* ── SMALL MOBILE VIEWPORT OVERRIDES (<= 600px) ── */
@media (max-width: 600px) {

  /* Preloader Reveal Sentence */
  .pl-sentence {
    font-size: clamp(1.4rem, 5.2vw, 2.2rem) !important;
    gap: 8px !important;
  }

  .pl-word-row {
    gap: 8px !important;
  }

  /* Preloader Wireframe Bounding Box */
  .pl-ux-box {
    padding: 16px 24px !important;
  }

  .pl-brand {
    font-size: clamp(1.2rem, 7vw, 2.4rem) !important;
  }

  .pl-wait-text {
    font-size: 13px !important;
    letter-spacing: 0.15em !important;
  }

  /* 3D Services Scroll Wheel mobile tuning */
  .svc-wheel {
    height: 50vh !important;
  }

  .svc-item {
    font-size: clamp(1.4rem, 5.5vw, 2.2rem) !important;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.25) !important;
    transform-origin: center center !important;
  }

  .svc-item.above-1 {
    transform: rotateX(20deg) translateZ(-30px) translateY(-75px) !important;
    opacity: 0.35 !important;
  }

  .svc-item.below-1 {
    transform: rotateX(-20deg) translateZ(-30px) translateY(75px) !important;
    opacity: 0.35 !important;
  }

  .svc-item.above-2,
  .svc-item.below-2,
  .svc-item.hidden {
    opacity: 0 !important;
  }

  /* Logos grid layout */
  .logos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .logo-box {
    padding: 24px 12px !important;
    font-size: 12px !important;
  }

  /* Process section cards */
  .c-sc-card {
    width: 180px !important;
    height: 230px !important;
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .c-sc-card h3 {
    font-size: 28px !important;
  }

  .c-sc-card div p:first-child {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  .c-sc-card div p:last-child {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .challenge-bg-text {
    font-size: clamp(28px, 6.5vw, 48px) !important;
  }
}

/* ── Blog display rules for mobile-adaptation ── */
.hero-blog-link {
  display: block;
}

.footer-blog-mobile {
  display: none !important;
}

@media (max-width: 1024px) {
  .hero-blog-link {
    display: none !important;
  }

  .footer-blog-mobile {
    display: none !important;
    /* Completely removed from mobile/tablet footer CTA */
  }

  #figmaAvatars,
  .avatars {
    display: none !important;
  }

  .pl-word.highlight::after {
    left: -4px !important;
    right: -4px !important;
  }

  .statement-text .highlight {
    white-space: nowrap !important;
    /* Strictly force single-line highlight on small viewports */
  }
}

/* ── BLOG PAGES SILKY ENTRANCE CHOREOGRAPHY ── */
.blog-page .header {
  animation: blogHeaderDrop 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes blogHeaderDrop {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-hero-section {
  animation: blogHeroFadeUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

@keyframes blogHeroFadeUp {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

.blog-card-item {
  animation: blogCardRise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.blog-card-item:nth-child(1) {
  animation-delay: 0.28s;
}

.blog-card-item:nth-child(2) {
  animation-delay: 0.42s;
}

.blog-card-item:nth-child(3) {
  animation-delay: 0.56s;
}

@keyframes blogCardRise {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

.blog-article-content {
  animation: blogHeroFadeUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}