/* ---------------------------------------------------
   Vorbim despre asta — design tokens
--------------------------------------------------- */
@property --hue-a{ syntax: '<number>'; inherits: true; initial-value: 195; }
@property --hue-b{ syntax: '<number>'; inherits: true; initial-value: 180; }
@property --hue-c{ syntax: '<number>'; inherits: true; initial-value: 165; }

:root{
  --cream:      #08131c;
  --cream-rgb:  8,19,28;
  --cream-2:    #101f2b;
  --cream-2-rgb: 16,31,43;
  --ink:        #eef4f9;
  --ink-rgb:    238,244,249;
  --ink-soft:   #cddfea;
  --ink-faint:  #86a0b0;
  --line:       rgba(var(--ink-rgb),0.14);

  /* ambient background gradient tuning — lightness/saturation of the
     corner glows, blobs, swirl and portrait card. Dark theme keeps them
     deep and saturated; the light theme (below) repaints the exact same
     gradients pale, so "theme" only ever repaints color, never structure */
  --glow-s-a: 45%; --glow-s-b: 42%; --glow-s-c: 40%;
  --glow-l-a: 16%; --glow-l-b: 15%; --glow-l-c: 14%;
  --blob-s-a: 80%; --blob-s-b: 75%; --blob-s-c: 70%;
  --blob-l-a: 58%; --blob-l-b: 55%; --blob-l-c: 52%;
  --blob-blend: screen;
  --swirl-s: 60%;
  --swirl-l: 50%;
  --swirl-blend: screen;
  --spotlight-rgb: 255,255,255;
  --spotlight-blend: screen;
  --headline-color: var(--ink);
  --portrait-s-a: 40%; --portrait-s-c: 35%;
  --portrait-l-a: 20%; --portrait-l-c: 16%;

  /* accent hues crossfade smoothly as each section becomes active (set via JS) —
     kept within the blue / teal family */
  --hue-a: 195;
  --hue-b: 180;
  --hue-c: 165;
  --accent: hsl(var(--hue-a) 65% 62%);
  transition: --hue-a 1.3s ease, --hue-b 1.3s ease, --hue-c 1.3s ease;

  --font-display: "Literata", ui-serif, Georgia, serif;
  --font-headline: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;

  --space-xs: 12px;
  --space-s: 20px;
  --space-m: 36px;
  --space-l: 64px;
  --space-xl: 112px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------
   Light theme — same tokens, repainted. Toggled by
   adding data-theme="light" to <html> (see .theme-toggle
   in main.js); "dark" is the default/only implicit theme.
--------------------------------------------------- */
:root[data-theme="light"]{
  --cream:      #f6f9f9;
  --cream-rgb:  246,249,249;
  --cream-2:    #eaf1f1;
  --cream-2-rgb: 234,241,241;
  --ink:        #12242b;
  --ink-rgb:    18,36,43;
  --ink-soft:   #35505a;
  --ink-faint:  #7a8f96;
  --line:       rgba(var(--ink-rgb),0.12);

  --glow-s-a: 55%; --glow-s-b: 50%; --glow-s-c: 46%;
  --glow-l-a: 93%; --glow-l-b: 91%; --glow-l-c: 90%;
  --blob-s-a: 55%; --blob-s-b: 50%; --blob-s-c: 46%;
  --blob-l-a: 90%; --blob-l-b: 88%; --blob-l-c: 86%;
  --blob-blend: multiply;
  --swirl-s: 45%;
  --swirl-l: 88%;
  --swirl-blend: multiply;
  --spotlight-rgb: 255,255,255;
  --spotlight-blend: normal;
  --headline-color: #446e95;
  --portrait-s-a: 45%; --portrait-s-c: 40%;
  --portrait-l-a: 93%; --portrait-l-c: 90%;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* lite mode: a static gradient stands in for the blurred/animated blobs —
   same palette, zero blur, zero continuous compositing */
html.lite body{
  background:
    radial-gradient(ellipse 90% 60% at 12% 0%, hsl(var(--hue-a) var(--glow-s-a) var(--glow-l-a)), transparent 60%),
    radial-gradient(ellipse 80% 55% at 100% 35%, hsl(var(--hue-b) var(--glow-s-b) var(--glow-l-b)), transparent 60%),
    radial-gradient(ellipse 75% 55% at 10% 100%, hsl(var(--hue-c) var(--glow-s-c) var(--glow-l-c)), transparent 60%),
    var(--cream);
}

::selection{ background: var(--accent); color: var(--cream); }

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

a{ color: inherit; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------------------------------------------------
   Animated interactive background
--------------------------------------------------- */
.bg-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* wrap = position + GSAP-driven scroll/mouse offset; blob = visual layer + ambient CSS drift */
.blob-wrap{
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  will-change: transform;
}
.blob{
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.7;
  mix-blend-mode: var(--blob-blend);
}
.blob-a-wrap{ top: -20%; left: -15%; }
.blob-a{
  background: radial-gradient(circle at 30% 30%, hsl(var(--hue-a) var(--blob-s-a) var(--blob-l-a)), transparent 70%);
}
.blob-b-wrap{ top: 20%; right: -25%; width: 55vmax; height: 55vmax; }
.blob-b{
  background: radial-gradient(circle at 60% 40%, hsl(var(--hue-b) var(--blob-s-b) var(--blob-l-b)), transparent 70%);
}
.blob-c-wrap{ bottom: -25%; left: 15%; width: 50vmax; height: 50vmax; }
.blob-c{
  background: radial-gradient(circle at 50% 50%, hsl(var(--hue-c) var(--blob-s-c) var(--blob-l-c)), transparent 70%);
}

.swirl{
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg, hsl(var(--hue-a) var(--swirl-s) var(--swirl-l)), hsl(var(--hue-b) var(--swirl-s) var(--swirl-l)), hsl(var(--hue-c) var(--swirl-s) var(--swirl-l)), hsl(var(--hue-a) var(--swirl-s) var(--swirl-l)));
  opacity: 0.07;
  mix-blend-mode: var(--swirl-blend);
}

.spotlight{
  position: absolute;
  top: -23vmax;
  left: -23vmax;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spotlight-rgb),0.16) 0%, rgba(var(--spotlight-rgb),0.06) 40%, transparent 72%);
  filter: blur(24px);
  opacity: 0;
  mix-blend-mode: var(--spotlight-blend);
  transition: opacity 1s ease;
  will-change: transform;
}
.spotlight.is-active{ opacity: 1; }

.particles{
  position: absolute;
  inset: 0;
}
/* wrapper carries the scroll-velocity offset; the dot inside it
   carries the independent ambient drift — kept apart so the two
   GSAP tweens never fight over the same transform */
.particle-scroll{
  position: absolute;
  width: 0;
  height: 0;
}
.particle{
  position: absolute;
  width: var(--size, 5px);
  height: var(--size, 5px);
  border-radius: 50%;
  background: var(--ink);
  opacity: var(--op, 0.4);
  filter: blur(0.5px);
}

.grain{
  position: absolute;
  inset: -10%;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------
   Reading progress — thin fixed rule tracking scroll
   position through the page (blog only)
--------------------------------------------------- */
.reading-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 101;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .reading-progress{ transition: transform .12s linear; }
}

/* ---------------------------------------------------
   Theme toggle — dark/light switch, docked in the header
   nav so it never sits over scrolling page content (a
   fixed vertically-centered dial used to drift across
   whatever body copy happened to pass behind it)
--------------------------------------------------- */
.theme-toggle{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink-rgb),0.18);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: border-color .35s var(--ease-soft), transform .3s var(--ease-soft);
}
.theme-toggle:hover{
  border-color: rgba(var(--ink-rgb),0.4);
  transform: scale(1.08);
}
.theme-toggle-icon{ display: none; }
.theme-toggle .icon-moon{ display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display: block; }

@media (max-width: 720px){
  .theme-toggle{ width: 32px; height: 32px; }
}

/* ---------------------------------------------------
   Share button — per-article, copies/shares a deep link
   straight to that post
--------------------------------------------------- */
.share-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-m);
  padding: 11px 22px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s var(--ease-soft), opacity .3s var(--ease-soft);
}
.share-btn:hover{ border-color: rgba(var(--ink-rgb),0.4); }
.share-btn.is-copied{ border-color: var(--accent); color: var(--accent); }
.share-btn-icon{ display: flex; }
.share-btn-icon svg{ display: block; }

/* ---------------------------------------------------
   Header
--------------------------------------------------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 18px clamp(20px, 5vw, 56px);
  background: rgba(var(--cream-rgb),0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--ink-rgb),0.08);
}

.nav-right{
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}

.nav-link{
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .3s var(--ease-soft);
}
.nav-link:hover{ color: var(--ink); }

.wordmark{
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .3s var(--ease-soft);
}
.wordmark:hover{ opacity: 0.72; }
.logo-mark{
  display: block;
  height: 30px;
  width: auto;
}

.nav-cta{
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(var(--ink-rgb),0.3);
  padding: 9px 20px;
  border-radius: 100px;
  transition: background .35s var(--ease-soft), color .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.nav-cta:hover{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ---------------------------------------------------
   Layout
--------------------------------------------------- */
main{ position: relative; z-index: 1; }

.scroll-path{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.scroll-path path{
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1 22;
  opacity: 0.32;
}

.section{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--space-xl) 0;
  overflow: hidden;
}

/* straight rule between adjacent sections, fencing each one off
   the same way the testimonial carousel is fenced off */
main .section + .section{
  border-top: 2px solid var(--line);
}

.wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 64px);
}

/* oversized ghost copy of each section's headline, sunk into the background —
   sized off viewport height so it dominates the screen regardless of length */
.ghost-text{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 40vh;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: 0.05;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 720px){
  .ghost-text{ font-size: 32vh; }
}

/* the hero carries two stacked headlines (h1 + h2) in one section, so its
   ghost — sized and centered off the full section height — would otherwise
   run straight through the second headline; fade it out before that point
   instead of letting it compete with real copy */
#hero .ghost-text{
  mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 26%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 26%);
}

.wrap-narrow{ max-width: 880px; position: relative; }

.post-number{
  position: absolute;
  top: -4vh;
  left: -0.02em;
  z-index: -1;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 26vh;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 720px){
  .post-number{ font-size: 18vh; top: -2vh; }
}

.about-grid{
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  max-width: 1080px;
}
.portrait{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: linear-gradient(155deg, hsl(var(--hue-a) var(--portrait-s-a) var(--portrait-l-a)), hsl(var(--hue-c) var(--portrait-s-c) var(--portrait-l-c)));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: clamp(10px, 1.6vw, 22px);
}
.portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-initials{
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  letter-spacing: -0.03em;
  color: rgba(var(--ink-rgb),0.16);
}
.portrait-sig{
  position: absolute;
  left: 20px;
  bottom: 44px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  color: var(--accent);
}
.hero-top{
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.hero-portrait-round{
  flex-shrink: 0;
  width: clamp(96px, 13vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(155deg, hsl(var(--hue-a) var(--portrait-s-a) var(--portrait-l-a)), hsl(var(--hue-c) var(--portrait-s-c) var(--portrait-l-c)));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-portrait-round img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-portrait-round .portrait-initials{
  font-size: clamp(1.8rem, 4vw, 3rem);
}
#hero .display{
  font-size: clamp(2.6rem, 8vw, 8.2rem);
  margin: 0;
}
@media (max-width: 720px){
  .hero-top{ flex-direction: column; align-items: flex-start; gap: 20px; }
}
.portrait em{
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: rgba(var(--ink-rgb),0.4);
}

/* ---------------------------------------------------
   Typography
--------------------------------------------------- */
.display{
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(3.6rem, 13vw, 12rem);
  line-height: 0.89;
  letter-spacing: -0.035em;
  color: var(--headline-color);
  margin: 0 0 var(--space-m);
}

.display-md{
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--headline-color);
  margin: 0 0 var(--space-m);
  max-width: 20ch;
}

.signature{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--ink-soft);
  margin: 0 0 var(--space-l);
}
.signature .dot{ color: var(--accent); font-family: var(--font-body); font-style: normal; }

.signature-lg{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "opsz" 45;
  font-optical-sizing: none;
  font-size: clamp(4.2rem, 9vw, 7.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--headline-color);
  margin: 0 0 var(--space-m);
  word-break: keep-all;
  overflow-wrap: normal;
}
.signature-lg .nowrap-word{
  display: inline-block;
  white-space: nowrap;
}

.body-text{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 var(--space-s);
}

.body-group .body-text:last-child{ margin-bottom: 0; }

.bold-line{
  color: var(--ink);
  font-weight: 600;
}

.cta-lead{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin: var(--space-m) 0 var(--space-m);
}

/* char/line split spans */
.split-chars .char, .split-lines .text-line-inner{
  display: inline-block;
  will-change: transform;
}
.split-lines .text-line{
  overflow: hidden;
  display: block;
}

/* ---------------------------------------------------
   Testimonials — horizontal snap-scroll carousel, one
   slide visible at a time, fenced off with rule lines
--------------------------------------------------- */
.testimonials{
  min-height: auto;
  padding: var(--space-l) 0;
}

.testimonial-carousel{
  margin-top: var(--space-l);
}

.testimonial-track{
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: height .35s var(--ease-soft);
}
.testimonial-track::-webkit-scrollbar{ display: none; }

.testimonial-slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 4px 2px;
}

.testimonial-text{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.testimonial-text::before{ content: "\201C"; color: var(--accent); }
.testimonial-text::after{ content: "\201D"; color: var(--accent); }

.testimonial-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  margin-top: var(--space-m);
}
.testimonial-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.testimonial-arrow:hover{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.testimonial-dots{
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-dot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.testimonial-dot.is-active{
  background: var(--accent);
  transform: scale(1.35);
}

/* ---------------------------------------------------
   Blog articles
--------------------------------------------------- */
.blog-subhead{
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin: var(--space-l) 0 var(--space-xs);
}
.body-group + .blog-subhead,
.blog-quote + .blog-subhead{
  margin-top: var(--space-l);
}

.blog-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-s);
  margin: 0 0 var(--space-xs);
}

.blog-byline{
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.blog-byline-name{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0;
}
.blog-byline-role{
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin: 4px 0 10px;
}
.blog-byline-link{
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: 0.85;
  transition: opacity .3s var(--ease-soft);
}
.blog-byline-link:hover{ opacity: 1; }

.article-index{
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
.article-index-link{
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: var(--ink-soft);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease-soft), padding-left .3s var(--ease-soft);
}
.article-index-link:hover{
  color: var(--ink);
  padding-left: 10px;
}
.article-index-num{
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent);
  flex-shrink: 0;
}
.article-index-title{
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
}

/* ---------------------------------------------------
   Buttons
--------------------------------------------------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 44px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.btn span{ position: relative; z-index: 1; transition: color .45s var(--ease-soft); }
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .45s var(--ease-soft);
  z-index: 0;
}
.btn:hover::before{ transform: translateY(0); }
.btn:hover span{ color: var(--cream); }

.btn-lg{
  padding: 26px 56px;
  font-size: 1.05rem;
}

.btn-sm{
  padding: 11px 22px;
  font-size: 0.85rem;
  font-weight: 500;
}

.btn-outline{
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb),0.3);
}
.btn-outline::before{ background: var(--ink); }
.btn-outline:hover span{ color: var(--cream); }

.btn-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}
.btn-group .share-btn{ margin-top: 0; }

/* ---------------------------------------------------
   Price box
--------------------------------------------------- */
.price-box{
  position: relative;
  margin-top: var(--space-l);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 56px);
  background: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.07));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 0 60px rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 24px 60px -24px rgba(0,0,0,0.55);
  overflow: hidden;
  max-width: 640px;
  isolation: isolate;
}
.price-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent 50%);
  pointer-events: none;
  z-index: -1;
}
.price-box::after{
  content: "";
  position: absolute;
  top: -60%;
  left: -15%;
  width: 55%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.16), transparent 75%);
  transform: rotate(18deg);
  pointer-events: none;
  z-index: -1;
}
.price-box-top{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: var(--space-s);
}
.price-value,
.price-unit{
  font-family: var(--font-headline);
  font-size: clamp(2.6rem, 6.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  color: #ffc94a;
}
.price-unit{
  opacity: 0.9;
}
.price-sedinta-mobile{ display: none; }
.price-text{
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------------------------------------------------
   Scroll cue
--------------------------------------------------- */
.scroll-cue{
  position: absolute;
  bottom: var(--space-l);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: var(--line);
  overflow: hidden;
}
.scroll-cue span{
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ink);
  animation: scrollcue 2.2s var(--ease-soft) infinite;
}
@keyframes scrollcue{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */
.site-footer{
  position: relative;
  z-index: 1;
  padding: var(--space-xl) 0 var(--space-l);
  border-top: 1px solid var(--line);
}
.footer-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  text-align: center;
}
.footer-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-m) var(--space-l);
}
.footer-link{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .35s var(--ease-soft);
}
.footer-link-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .35s var(--ease-soft), color .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.footer-link-text{
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}
.footer-link:hover{ color: var(--ink); }
.footer-link:hover .footer-link-icon{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.footer-signature{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------------------------------------------------
   Responsive
--------------------------------------------------- */
@media (max-width: 720px){
  body{ font-size: 16px; }
  .section{ padding: var(--space-l) 0; }
  .hero{ padding-top: calc(var(--space-l) + 64px); }
  .display{ font-size: clamp(2.8rem, 14vw, 5rem); }
  .signature-lg{ font-size: clamp(3.4rem, 16vw, 5.5rem); }
  .signature .dot{ display: none; }
  .signature .sig-role{ display: block; margin-top: 4px; }
  .footer-signature .footer-sig-slash{ display: none; }
  .footer-signature .footer-sig-sub{ display: block; margin-top: 4px; }
  .price-box-top{ flex-wrap: wrap; }
  .price-sedinta{ flex-basis: 100%; }
  .price-sedinta-desktop{ display: none; }
  .price-sedinta-mobile{ display: inline; }
  .btn, .btn-lg{ padding: 18px 32px; width: 100%; }
  .site-header{ padding: 16px 20px; }
  .about-grid{ grid-template-columns: 1fr; gap: 28px; }
  .portrait{ width: 100%; max-width: 280px; margin: 0 auto; aspect-ratio: 4 / 5; }

  /* mobile GPUs choke on large blur radii + backdrop-filter — trim both */
  .blob{ filter: blur(36px); opacity: 0.55; }
  .swirl{ display: none; }
  .site-header{ background: rgba(var(--cream-rgb),0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .price-box{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

@media (max-width: 480px){
  .blob{ filter: blur(28px); }
}

/* ---------------------------------------------------
   Lite mode — for devices main.js's capability check
   flags as slower (low core count / low memory / a
   phone-class touch screen / data-saver on). Same
   layout, type and palette; every blur, backdrop-filter,
   and continuously-running animation is stripped.
--------------------------------------------------- */
html.lite .blob-wrap,
html.lite .swirl,
html.lite .spotlight,
html.lite .particles,
html.lite .grain,
html.lite .scroll-path,
html.lite .ghost-text{
  display: none;
}
html.lite .site-header{
  background: rgba(var(--cream-rgb),0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.lite .price-box{
  background: rgba(var(--cream-2-rgb),0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.5);
}
html.lite .price-box::before,
html.lite .price-box::after{
  display: none;
}

/* ---------------------------------------------------
   Blog page — every letter runs pure white, no tinted
   or accent-colored text; hover feedback moves to
   opacity instead of a color shift
--------------------------------------------------- */
body.page-blog,
.page-blog{ color: var(--ink); }
body.page-blog .wordmark, .page-blog .wordmark,
body.page-blog .nav-link, .page-blog .nav-link,
body.page-blog .nav-cta, .page-blog .nav-cta,
body.page-blog .signature, .page-blog .signature,
body.page-blog .body-text, .page-blog .body-text,
body.page-blog .cta-lead, .page-blog .cta-lead,
body.page-blog .bold-line, .page-blog .bold-line,
body.page-blog .blog-subhead, .page-blog .blog-subhead,
body.page-blog .blog-quote, .page-blog .blog-quote,
body.page-blog .blog-byline-name, .page-blog .blog-byline-name,
body.page-blog .blog-byline-role, .page-blog .blog-byline-role,
body.page-blog .blog-byline-link, .page-blog .blog-byline-link,
body.page-blog .article-index-link, .page-blog .article-index-link,
body.page-blog .article-index-num, .page-blog .article-index-num,
body.page-blog .article-index-title, .page-blog .article-index-title,
body.page-blog .footer-link-text, .page-blog .footer-link-text,
body.page-blog .footer-signature, .page-blog .footer-signature{
  color: var(--ink);
}
body.page-blog .display, .page-blog .display,
body.page-blog .display-md, .page-blog .display-md{
  color: var(--headline-color);
}
body.page-blog .nav-link:hover, .page-blog .nav-link:hover,
body.page-blog .footer-link:hover, .page-blog .footer-link:hover,
body.page-blog .article-index-link:hover, .page-blog .article-index-link:hover{
  color: var(--ink);
  opacity: 0.7;
}
/* the icon badge itself keeps the site-wide ink-fill/cream-icon invert on
   hover (same pattern as .nav-cta and .testimonial-arrow) — the opacity-only
   rule above is for running text, not this component, and forcing color:ink
   here too previously matched it to its own ink background, making the icon
   disappear on hover */

/* ---------------------------------------------------
   Light theme — a handful of spots the shared tokens
   can't reach on their own (a white glass edge needs to
   become a dark one to stay visible on a pale ground)
--------------------------------------------------- */
:root[data-theme="light"] .price-box{
  border-color: rgba(var(--ink-rgb),0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 0 60px rgba(var(--ink-rgb),0.03),
    inset 0 -1px 0 rgba(var(--ink-rgb),0.08),
    0 24px 60px -24px rgba(var(--ink-rgb),0.22);
}
:root[data-theme="light"] .grain{ opacity: 0.035; }

/* ---------------------------------------------------
   Reduced motion
--------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}