/* Public site. Builds on app.css tokens (themes, glass, buttons). Logical properties only => RTL works. */
.wrap { width: min(1160px, 100% - 2rem); margin-inline: auto; }
.narrow { width: min(820px, 100% - 2rem); }
.site-header { position: sticky; inset-block-start: .75rem; z-index: 40; width: min(1160px, 100% - 1.5rem); margin: .75rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .9rem; border-radius: 18px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--text); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-nav a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 600; } .site-nav a:not(.btn):hover { color: var(--text); }
.nav-toggle { display: none; }
.lang-switch { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.lang-switch a { padding: .25em .5em; border-radius: 8px; font-size: .8rem; } .lang-switch a.cur { background: var(--primary); color: var(--on-primary) !important; }
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section-head { text-align: center; margin-bottom: 2rem; } .section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; min-height: min(78vh, 720px); padding-block: 3rem; }
.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.08; margin-bottom: .6em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 56ch; }
.hero-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .4rem; color: var(--muted); }
.hero-points .ic { color: var(--ok); }
.hero-art { position: relative; min-height: 340px; perspective: 900px; }
.crystal { position: absolute; border-radius: 28px; transform-style: preserve-3d; animation: drift 9s var(--ease) infinite alternate; }
.c1 { width: 56%; height: 62%; inset-block-start: 4%; inset-inline-start: 6%; transform: rotate3d(1, 1, 0, 18deg); }
.c2 { width: 44%; height: 48%; inset-block-end: 6%; inset-inline-end: 4%; animation-delay: -3s; transform: rotate3d(1, -1, 0, 22deg); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, transparent), var(--surface)); }
.c3 { width: 30%; height: 32%; inset-block-start: 8%; inset-inline-end: 10%; animation-delay: -6s; }
.hero-card { position: absolute; inset: 0; margin: auto; width: 56%; height: 40%; display: grid; place-items: center; align-content: center; gap: .5rem; text-align: center; }
@keyframes drift { to { transform: translate3d(0, -14px, 0) rotate3d(1, 1, 0, 8deg); } }
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.service, .project { transition: transform .25s var(--ease), box-shadow .25s; } .service:hover, .project:hover { transform: translateY(-4px); }
.svc-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--on-primary); margin-bottom: .8rem; }
.project { overflow: hidden; padding: 0; } .project img { width: 100%; height: 190px; object-fit: cover; display: block; }
.steps { list-style: none; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding: 0; margin: 0; }
.step-n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 700; margin-bottom: .6rem; }
.faq { padding: 1rem 1.25rem; margin-bottom: .75rem; } .faq summary { cursor: pointer; font-weight: 650; } .faq p { margin: .75rem 0 0; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-flash { width: min(820px, 100% - 2rem); margin: 1rem auto 0; }
.site-footer { margin-top: 3rem; padding: 2rem 0 1.5rem; border-top: 1px solid var(--border); }
.foot-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.wa-float { position: fixed; inset-block-end: 1.1rem; inset-inline-end: 1.1rem; z-index: 50; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }
.prose h2 { margin-top: 1.4rem; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in, .no-js .reveal { opacity: 1; transform: none; }
[data-motion="reduce"] .reveal, [data-motion="reduce"] .crystal { transition: none; animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .crystal { animation: none; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; } .hero-art { min-height: 240px; order: -1; }
  .nav-toggle { display: inline-grid; }
  .site-nav { display: none; position: absolute; inset-inline: 0; inset-block-start: calc(100% + .5rem); flex-direction: column; align-items: stretch; padding: 1rem; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 16px; }
  .site-nav.open { display: flex; }
}