@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

 @font-face {
    font-family: 'Versatylo Rounded';
    src: url('./fonts/VersatyloRounded.339e7186628f0eba1bc4.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} 

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    margin: 0;
/*    font-family: 'Versatylo Rounded Regular';*/
     font-family: 'Versatylo Rounded', 'Outfit', system-ui, -apple-system, sans-serif; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #ffffff;
    color: #3c5f4a;
    min-height: 100vh;
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 140 22% 30%;
        --card: 0 0% 100%;
        --card-foreground: 140 22% 30%;
        --popover: 0 0% 100%;
        --popover-foreground: 140 22% 30%;
        --primary: 140 22% 30%;
        --primary-foreground: 0 0% 100%;
        --secondary: 100 20% 92%;
        --secondary-foreground: 140 22% 30%;
        --muted: 100 20% 95%;
        --muted-foreground: 140 15% 45%;
        --accent: 80 30% 70%;
        --accent-foreground: 140 22% 25%;
        --destructive: 0 70% 50%;
        --destructive-foreground: 0 0% 100%;
        --border: 140 20% 88%;
        --input: 140 20% 88%;
        --ring: 140 22% 30%;
        --radius: 1rem;

        /* ZenSonic palette — white medical theme */
        --zs-text: #3c5f4a;           /* deep forest — headlines, body */
        --zs-text-soft: rgba(60, 95, 74, 0.75);
        --zs-text-softer: rgba(60, 95, 74, 0.55);
        --zs-line: rgba(60, 95, 74, 0.14);
        --zs-line-strong: rgba(60, 95, 74, 0.22);
        --zs-card: #ffffff;
        --zs-card-tint: #f4f7f1;      /* very soft sage */
        --zs-card-tint-2: #eaf0e4;    /* soft sage */
        --zs-sage: #8fb4a3;           /* navbar sage */
        --zs-sage-soft: #c9dcd0;
        --zs-sage-deep: #5d8b6c;
        --zs-olive: #b9d096;
        --zs-olive-2: #97b575;
        --zs-olive-3: #8d9f3f;
        --zs-deep: #3c5f4a;
        --zs-deep-hover: #2a4535;
    }
}

@layer base {
    * {
        @apply border-border;
    }
}

/* Typography */
.font-display {
    font-family: 'Versatylo Rounded', 'Outfit', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    letter-spacing: 0.005em;
}

.font-body {
    font-family: 'Versatylo Rounded', 'Outfit', system-ui, -apple-system, sans-serif;
}

/* Logo */
.zs-logo {
    font-family: 'Versatylo Rounded', 'Outfit', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    color: #3c5f4a;
    line-height: 0.95;
    letter-spacing: 0.01em;
}

/* Card — medical white */
.zs-glass {
    background: #ffffff;
    border: 1px solid var(--zs-line);
    box-shadow: 0 1px 2px rgba(60, 95, 74, 0.04), 0 8px 24px rgba(60, 95, 74, 0.06);
}

.zs-glass-strong {
    background: #ffffff;
    border: 1px solid var(--zs-line-strong);
    box-shadow: 0 2px 4px rgba(60, 95, 74, 0.05), 0 12px 32px rgba(60, 95, 74, 0.08);
}

/* Soft-tinted variant for subtle depth */
.zs-card-tint {
    background: var(--zs-card-tint);
    border: 1px solid var(--zs-line);
}

/* Pill button (primary) — olive gradient, kept */
.zs-btn-primary {
    background: linear-gradient(135deg, #b9d096 0%, #97b575 100%);
    color: #ffffff;
    border-radius: 9999px;
    padding: 0.7rem 1.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(60, 100, 75, 0.18);
}
.zs-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(60, 100, 75, 0.25);
}

/* Pill button (solid middle green) */
.zs-btn-solid {
    background: #97b575;
    color: #ffffff;
    border-radius: 9999px;
    padding: 0.7rem 1.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(60, 100, 75, 0.18);
}
.zs-btn-solid:hover {
    background: #86a465;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(60, 100, 75, 0.22);
}

/* Pill button (ghost) — mint-sage with forest-green text (used for View Research) */
.zs-btn-ghost {
    background: #D5E3DA;
    color: #3c5f4a;
    border-radius: 9999px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.85rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(60, 95, 74, 0.22);
    box-shadow: 0 2px 8px rgba(60, 100, 75, 0.08);
}
.zs-btn-ghost:hover {
    background: #c5d8cc;
    color: #2a4535;
    border-color: rgba(60, 95, 74, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(60, 100, 75, 0.14);
}

/* Service chip — uniform mint-sage pill */
.zs-chip {
    background: #D5E3DA;
    border: 1px solid rgba(60, 95, 74, 0.18);
    border-radius: 9999px;
    padding: 0.85rem 1.4rem;
    color: #3c5f4a;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 2px rgba(60, 95, 74, 0.04);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zs-chip:hover {
    background: #c5d8cc;
    border-color: rgba(60, 95, 74, 0.32);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(60, 95, 74, 0.1);
}

/* Step number circle */
.zs-step-circle {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Versatylo Rounded', 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(140, 160, 80, 0.3);
}

/* Brainwave node */
.zs-brain-node {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    background: var(--zs-sage-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(70, 110, 85, 0.22);
}

/* Soft scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: rgba(60, 95, 74, 0.25);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 95, 74, 0.4);
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* Selection */
::selection {
    background: #3c5f4a;
    color: #ffffff;
}

/* Phone mockup */
.zs-phone {
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid var(--zs-line);
    padding: 8px;
    box-shadow: 0 18px 40px rgba(60, 90, 65, 0.1);
}

/* Subtle reveal */
@keyframes zsFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.zs-fade-up {
    animation: zsFadeUp 0.7s ease both;
}

/* Connector line for steps */
.zs-step-line {
    height: 1px;
    background: rgba(60, 95, 74, 0.2);
    flex: 1;
    margin: 0 4px;
}

/* Headings reset */
h1, h2, h3, h4 {
    color: #3c5f4a;
    margin: 0;
}

/* Text helpers */
.text-soft { color: rgba(60, 95, 74, 0.75); }
.text-softer { color: rgba(60, 95, 74, 0.55); }

/* Container */
.zs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (min-width: 768px) {
    .zs-container { padding-left: 2rem; padding-right: 2rem; }
}

/* Section spacing */
.zs-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (min-width: 768px) {
    .zs-section { padding-top: 6rem; padding-bottom: 6rem; }
}

.dots_active {
    width: 24px;
    background: #3c5f4a;
}
.dots_inactive {
    width: 6px;
    background: #3c5f4a40;
}

:is(.cms-home_page_en, .cms-zensonic-new-home) picture {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.w-11 {
    width: calc(4*11px);
}
.h-11 {
    height: calc(4*11px);
}
.bg-white\/85 {
    background-color: rgba(255, 255, 255, 0.85);
}

.w-\[140px\] {
    width: 140px;
}
.h-\[140px\] {
    height: 140px;
}