.hero{position:relative;padding-block:var(--sp-6) var(--sp-5)}.hero__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);text-align:center;max-width:62rem;margin-inline:auto;width:100%}.hero__tile--message{display:grid;justify-items:center;row-gap:var(--sp-3)}.hero__headline{font-family:var(--font-body);font-weight:700;font-size:var(--fs-hero);line-height:1.08;letter-spacing:-.01em}.hero__headline strong{font-weight:800;color:var(--accent)}.hero__sub{font-size:var(--fs-body-lg);color:var(--text-on-dark-dim);max-width:36rem;line-height:1.5}.hero__cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;align-items:center}.btn--hero{background:transparent;border:1px solid var(--accent-dim);color:var(--accent);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body-lg);font-weight:600;border-radius:100px;gap:var(--sp-2);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;transition:background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-fast) var(--ease-bounce),box-shadow var(--dur-base) ease}.btn--hero:hover{background:#c23b541f;border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.btn--hero:active{background:var(--accent);border-color:var(--accent);color:var(--text-on-dark);box-shadow:0 0 16px var(--accent-dim);transform:scale(.98)}.btn--hero svg{width:18px;height:18px;stroke:currentColor;transition:transform var(--dur-base) ease}.btn--hero:hover svg{transform:translate(3px)}[dir=rtl] .btn--hero:hover svg{transform:translate(-3px)}.hero__demo-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-on-dark-dim);font-size:var(--fs-body);font-weight:500;text-decoration:none;padding:var(--sp-2) var(--sp-3);cursor:pointer;transition:color var(--dur-fast) ease}.hero__demo-link:hover{color:var(--text-on-dark)}.hero__demo-chevron{width:16px;height:16px;stroke:currentColor;transition:transform var(--dur-base) var(--ease-bounce)}.hero__demo-link:hover .hero__demo-chevron{transform:translateY(3px)}@media (max-width: 640px){.hero{padding-block:var(--sp-4)}}