/* _shared/css/dexo.css — sections unique to dexo.ch.
   Shared design system (tokens, base, hero, problem, cards, numbers, contact)
   lives in tokens.css + base.css. */

/* --- SERVICES --- */
.services { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.service-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 14px; padding: var(--space-md); transition: border-color 0.25s, box-shadow 0.25s; }
.service-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(45, 90, 61, 0.06); }
.service-card h3 { font-family: var(--font-sans); font-weight: 400; font-size: 1.35rem; margin-bottom: 0.8rem; color: var(--color-ink); }
.service-card p { font-size: 0.92rem; color: var(--color-ink-light); line-height: 1.65; margin-bottom: 0.6rem; }
.service-outcome { font-size: 0.85rem; color: var(--color-accent); font-weight: 500; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }

/* --- PRODUCTS (Specta + Synaps tiles) --- */
.products { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.product-tile { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 14px; padding: var(--space-md); display: flex; flex-direction: column; text-decoration: none; transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s; }
.product-tile:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transform: translateY(-2px); }
.product-name { font-family: var(--font-sans); font-size: 1.8rem; font-weight: 400; margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.product-pitch { font-size: 0.98rem; color: var(--color-ink-light); line-height: 1.65; margin-bottom: var(--space-sm); flex-grow: 1; }
.product-link { align-self: flex-start; font-size: 0.9rem; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity 0.2s; }
.product-link:hover { opacity: 0.75; }
.product-tile--specta { background: #E8EFF7; border: 1px solid #c3d4e8; border-left: 4px solid #1B4F72; }
.product-tile--specta .product-name, .product-tile--specta .product-link { color: #1B4F72; }
.product-tile--synaps { background: #F3EEFC; border: 1px solid #d5c8f5; border-left: 4px solid #5B21B6; }
.product-tile--synaps .product-name, .product-tile--synaps .product-link { color: #5B21B6; }

/* --- HEALTH CHECK --- */
.healthcheck { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.hc-inner { background: var(--color-white); border: 2px solid var(--color-accent); border-radius: 16px; padding: var(--space-lg); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-lg); align-items: center; }
.hc-inner h2 { font-family: var(--font-sans); font-weight: 400; font-size: 1.6rem; margin-bottom: 0.8rem; color: var(--color-ink); }
.hc-inner h2 em { font-style: italic; color: var(--color-accent); }
.hc-inner > div p { font-size: 0.95rem; color: var(--color-ink-light); line-height: 1.7; margin-bottom: 0.6rem; }
.hc-details { background: var(--color-accent-bg); border-radius: 12px; padding: var(--space-md); }
.hc-details h3 { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-sm); }
.hc-detail-item { font-size: 0.9rem; color: var(--color-ink-light); line-height: 1.6; padding: 0.5rem 0; border-bottom: 1px solid rgba(45, 90, 61, 0.1); }
.hc-detail-item:last-child { border-bottom: none; }
.hc-detail-item strong { color: var(--color-ink); font-weight: 500; }
.hc-cta { display: inline-block; margin-top: var(--space-sm); font-size: 0.9rem; font-weight: 500; color: var(--color-accent); text-decoration: none; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; transition: opacity 0.2s; }
.hc-cta:hover { opacity: 0.75; }

/* --- COMPLEMENTARY SERVICES --- */
.complementary { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.complementary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.comp-card { background: var(--color-surface-warm); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-md); display: flex; flex-direction: column; }
.comp-card h3 { font-family: var(--font-sans); font-weight: 400; font-size: 1.2rem; color: var(--color-ink); margin-bottom: 0.6rem; }
.comp-card p { font-size: 0.92rem; color: var(--color-ink-light); line-height: 1.65; margin-bottom: 0.6rem; }
.comp-card p.comp-meta { font-size: 0.82rem; font-style: italic; color: var(--color-ink-muted); margin-bottom: var(--space-sm); }
.comp-link { align-self: flex-start; margin-top: auto; font-size: 0.85rem; font-weight: 500; color: var(--color-accent); text-decoration: none; border-bottom: 1px solid var(--color-accent); padding-bottom: 1px; transition: opacity 0.2s; }
.comp-link:hover { opacity: 0.75; }

/* --- APPROACH --- */
.approach { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.approach-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md); }
.step { position: relative; }
.step h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-ink); }
.step p { font-size: 0.88rem; color: var(--color-ink-light); line-height: 1.6; }

/* --- CREDIBILITY --- */
.credibility { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.cred-inner { background: var(--color-accent); border-radius: 16px; padding: var(--space-lg); color: var(--color-white); }
.cred-inner h2 { font-family: var(--font-sans); font-weight: 400; font-size: 1.6rem; margin-bottom: var(--space-md); color: var(--color-white); }
.cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.cred-item h3 { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.35rem; }
.cred-item p { font-size: 0.95rem; line-height: 1.6; opacity: 0.92; }
.founder { display: flex; gap: var(--space-md); align-items: center; margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.founder-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.25); }
.founder-info h3 { font-family: var(--font-sans); font-weight: 400; font-size: 1.4rem; color: var(--color-white); margin-bottom: 0.4rem; text-transform: none; letter-spacing: 0; opacity: 1; }
.founder-info p { font-size: 0.95rem; line-height: 1.65; opacity: 0.92; margin: 0; }

/* --- CONTACT (dexo language row) --- */
.contact-langs { margin-top: var(--space-md); font-size: 0.85rem; color: var(--color-ink-muted); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .services-grid, .approach-steps { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .complementary-grid { grid-template-columns: 1fr; }
    .hc-inner { grid-template-columns: 1fr; padding: var(--space-md); }
    .cred-grid { grid-template-columns: 1fr; }
    .cred-inner { padding: var(--space-md); }
    .founder { flex-direction: column; text-align: center; gap: var(--space-sm); }
}