@font-face {
  font-family: "Arpsy Sans";
  src: url("/fonts/inter-300.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Arpsy Sans";
  src: url("/fonts/inter-400.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Arpsy Sans";
  src: url("/fonts/inter-500.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Arpsy Serif";
  src: url("/fonts/playfair-display-400.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Arpsy Serif";
  src: url("/fonts/playfair-display-600.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

:root {
  --font-sans-arpsy: "Arpsy Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif-arpsy: "Arpsy Serif", "Playfair Display", Georgia, Cambria, "Times New Roman", serif;
  --arpsy-page: #eef5f0;
  --arpsy-page-warm: #f7f7f2;
  --arpsy-ink: #111111;
  --arpsy-muted: #4a6358;
  --arpsy-green: #1a6b4a;
  --arpsy-surface: rgba(255, 255, 255, 0.9);
  --arpsy-surface-soft: rgba(255, 255, 255, 0.68);
  --arpsy-line: rgba(26, 107, 74, 0.14);
}

html {
  background: var(--arpsy-page);
  font-family: var(--font-sans-arpsy);
  min-height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(238, 245, 240, 0.98) 0%, rgba(244, 250, 244, 0.96) 34%, rgba(241, 248, 242, 0.95) 68%, rgba(247, 247, 242, 0.98) 100%) !important;
  color: var(--arpsy-ink);
  font-family: var(--font-sans-arpsy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 8%, rgba(116, 214, 184, 0.24), transparent 26rem),
    radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.72), transparent 24rem);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
  opacity: 0.11;
}

#root,
.page-shell,
.seo-static-shell,
.landing-ambient,
.landing-ambient-soft {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.page-shell::before,
.landing-ambient::before,
.landing-ambient-soft::before,
.seo-static-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 8%, rgba(116, 214, 184, 0.2), transparent 22rem),
    radial-gradient(circle at 84% 18%, rgba(190, 242, 225, 0.17), transparent 22rem),
    radial-gradient(circle at 27% 31%, rgba(152, 227, 200, 0.13), transparent 24rem),
    radial-gradient(circle at 76% 45%, rgba(132, 221, 189, 0.12), transparent 24rem),
    radial-gradient(circle at 17% 62%, rgba(170, 236, 212, 0.12), transparent 26rem),
    radial-gradient(circle at 87% 76%, rgba(141, 223, 194, 0.11), transparent 26rem),
    radial-gradient(circle at 39% 92%, rgba(121, 215, 183, 0.1), transparent 28rem);
}

.landing-ambient,
.landing-ambient-soft {
  background: transparent !important;
  color: var(--arpsy-ink);
  font-family: var(--font-sans-arpsy);
}

.landing-ambient main > section,
.landing-ambient-soft main > section {
  background: transparent !important;
}

.landing-ambient h1,
.landing-ambient h2,
.landing-ambient h3,
.landing-ambient h4,
.landing-ambient .font-serif,
.landing-ambient .font-playfair {
  font-family: var(--font-serif-arpsy) !important;
}

.landing-ambient p,
.landing-ambient a,
.landing-ambient button,
.landing-ambient input,
.landing-ambient textarea,
.landing-ambient .font-sans {
  font-family: var(--font-sans-arpsy) !important;
}

.page-shell {
  color: var(--arpsy-ink);
  font-family: var(--font-sans-arpsy);
}

.page-shell h1,
.page-shell .score-value,
.page-shell .feedback-score,
.page-shell .comparison-value {
  font-family: var(--font-serif-arpsy);
}