:root {
      --blue: #1E8FD5;
      --blue-dark: #0F6EA9;
      --blue-soft: #EAF6FD;
      --ink: #101820;
      --muted: #61707D;
      --line: #E4EAF0;
      --surface: #F7FAFC;
      --white: #FFFFFF;
      --radius: 22px;
      --shadow: 0 18px 50px rgba(16, 24, 32, 0.08);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--white);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      width: min(1160px, calc(100% - 40px));
      margin: 0 auto;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.90);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(228,234,240,.85);
    }

    .nav-inner {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: -0.03em;
      font-size: 21px;
    }

    .brand-mark {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: var(--blue);
      display: inline-grid;
      place-items: center;
      color: #fff;
      font-size: 14px;
      box-shadow: 0 6px 18px rgba(30,143,213,.28);
    }

    .brand-logo {
      height: 26px;
      width: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 14px;
      color: #465562;
    }

    .nav-links a:hover {
      color: var(--blue);
    }

    .nav-links .lang-switch {
      padding: 4px 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 12px;
      color: #fff;
      background: var(--blue);
      font-weight: 700;
      font-size: 14px;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      box-shadow: 0 8px 22px rgba(30,143,213,.20);
    }

    .nav-cta:hover {
      transform: translateY(-1px);
      background: var(--blue-dark);
      box-shadow: 0 12px 26px rgba(30,143,213,.25);
    }

    .nav-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-cta-secondary {
      color: var(--blue-dark);
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: none;
    }

    .nav-cta-secondary:hover {
      background: var(--blue-soft);
      box-shadow: none;
    }

    .menu-btn {
      display: none;
      border: 0;
      background: none;
      font: inherit;
      cursor: pointer;
      padding: 8px;
    }

    .hero {
      padding: 94px 0 84px;
      overflow: hidden;
      background:
        radial-gradient(circle at 85% 15%, rgba(30,143,213,.12), transparent 30%),
        radial-gradient(circle at 0% 35%, rgba(30,143,213,.08), transparent 28%),
        #fff;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      align-items: center;
      gap: 70px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border-radius: 999px;
      background: var(--blue-soft);
      color: var(--blue-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--blue);
    }

    h1 {
      font-size: clamp(46px, 6.2vw, 80px);
      line-height: .98;
      letter-spacing: -0.055em;
      margin: 0 0 22px;
      max-width: 740px;
    }

    .hero p {
      margin: 0;
      color: var(--muted);
      font-size: 18px;
      max-width: 620px;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 30px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 20px;
      border-radius: 13px;
      font-weight: 700;
      font-size: 14px;
      border: 1px solid transparent;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .btn-primary {
      color: white;
      background: var(--blue);
      box-shadow: 0 12px 26px rgba(30,143,213,.20);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      background: var(--blue-dark);
      box-shadow: 0 16px 30px rgba(30,143,213,.26);
    }

    .btn-secondary {
      border-color: var(--line);
      background: #fff;
      color: var(--ink);
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      border-color: #ccd6df;
      box-shadow: 0 10px 20px rgba(16,24,32,.06);
    }

    .hero-proof {
      margin-top: 22px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #6C7A86;
      font-size: 12px;
    }

    .check {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      background: #E9F8EF;
      color: #1B8B46;
      font-size: 11px;
      font-weight: 800;
    }

    .dashboard {
      position: relative;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: #F7FAFD;
      box-shadow: var(--shadow);
      transform: perspective(1400px) rotateY(var(--ry, -4deg)) rotateX(var(--rx, 1deg)) translate3d(0, var(--py, 0px), 0) scale(var(--s, 1));
      will-change: transform;
    }

    .dash-window {
      border: 1px solid #DCE5EC;
      border-radius: 20px;
      background: #fff;
      overflow: hidden;
    }

    .dash-top {
      height: 54px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
      gap: 14px;
    }

    .dash-brand {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .dash-actions {
      display: flex;
      gap: 6px;
    }

    .dash-pill {
      width: 25px;
      height: 25px;
      border-radius: 8px;
      background: #F0F4F7;
    }

    .dash-body {
      display: grid;
      grid-template-columns: 88px 1fr;
      min-height: 390px;
    }

    .dash-side {
      border-right: 1px solid var(--line);
      background: #FBFCFD;
      padding: 14px 10px;
      display: grid;
      align-content: start;
      gap: 8px;
    }

    .side-item {
      height: 30px;
      border-radius: 8px;
      background: #F2F5F8;
    }

    .side-item.active {
      background: var(--blue-soft);
    }

    .dash-main {
      padding: 18px;
    }

    .dash-title {
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }

    .stat {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px;
    }

    .stat small {
      color: #7B8791;
      font-size: 9px;
      display: block;
      margin-bottom: 5px;
    }

    .stat strong {
      font-size: 16px;
      letter-spacing: -.03em;
    }

    .calendar {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
    }

    .calendar-head {
      display: grid;
      grid-template-columns: 70px repeat(5, 1fr);
      background: #FBFCFD;
      border-bottom: 1px solid var(--line);
    }

    .calendar-head div {
      min-height: 30px;
      display: grid;
      place-items: center;
      font-size: 9px;
      color: #7A8791;
      border-right: 1px solid var(--line);
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: 70px repeat(5, 1fr);
      position: relative;
      min-height: 225px;
    }

    .time-col,
    .court-col {
      display: grid;
      grid-template-rows: repeat(5, 1fr);
    }

    .time-col div,
    .court-col div {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      min-height: 45px;
      padding: 8px 5px;
      font-size: 8px;
      color: #8A949D;
    }

    .court-col {
      position: relative;
    }

    .booking {
      position: absolute;
      left: 7px;
      right: 7px;
      border-radius: 8px;
      background: #E7F5FD;
      border: 1px solid #C4E4F5;
      padding: 7px;
      font-size: 8px;
      color: #0F6EA9;
      font-weight: 700;
    }

    .booking.b2 {
      background: #F3F6F8;
      border-color: #E1E8ED;
      color: #53616C;
    }

    .booking.b3 {
      background: #EDF9F1;
      border-color: #D2EEDA;
      color: #2D7A45;
    }

    section {
      scroll-margin-top: 90px;
    }

    .section {
      padding: 100px 0;
    }

    .section.alt {
      background: var(--surface);
    }

    .section-head {
      max-width: 720px;
      margin-bottom: 42px;
    }

    .kicker {
      color: var(--blue);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 12px;
    }

    h2 {
      font-size: clamp(34px, 4.6vw, 58px);
      line-height: 1.02;
      letter-spacing: -0.045em;
      margin: 0 0 14px;
    }

    .section-head p {
      color: var(--muted);
      margin: 0;
      font-size: 17px;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .feature-card {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      min-height: 220px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(16,24,32,.06);
      border-color: #D4E3EC;
    }

    .icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--blue-soft);
      color: var(--blue-dark);
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 15px;
      margin-bottom: 19px;
    }

    .feature-card h3 {
      margin: 0 0 9px;
      font-size: 18px;
      letter-spacing: -.025em;
    }

    .feature-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .split {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 70px;
      align-items: center;
    }

    .list {
      display: grid;
      gap: 13px;
      margin-top: 25px;
    }

    .list-row {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 11px;
      align-items: start;
      padding: 13px 0;
      border-bottom: 1px solid var(--line);
    }

    .list-row:last-child {
      border-bottom: 0;
    }

    .list-check {
      width: 24px;
      height: 24px;
      border-radius: 8px;
      background: var(--blue-soft);
      color: var(--blue);
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 800;
    }

    .list-row strong {
      display: block;
      margin-bottom: 3px;
      font-size: 14px;
    }

    .list-row span {
      color: var(--muted);
      font-size: 13px;
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: 26px;
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .panel-head {
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 800;
    }

    .panel-badge {
      padding: 7px 9px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      background: var(--blue-soft);
      color: var(--blue-dark);
    }

    .workflow {
      padding: 22px;
      display: grid;
      gap: 11px;
    }

    .workflow-row {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 13px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    .workflow-num {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      background: var(--blue-soft);
      color: var(--blue-dark);
      font-size: 12px;
      font-weight: 800;
    }

    .workflow-row strong {
      display: block;
      font-size: 13px;
      margin-bottom: 3px;
    }

    .workflow-row span {
      color: var(--muted);
      font-size: 11px;
    }

    .status {
      font-size: 10px;
      font-weight: 800;
      color: #2D7A45;
      background: #EDF9F1;
      padding: 7px 9px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .omn {
      position: relative;
      overflow: hidden;
      padding: 100px 0;
      background:
        radial-gradient(circle at 92% 14%, rgba(30,143,213,.18), transparent 30%),
        #0E1820;
      color: white;
    }

    .omn .kicker { color: #73C5F2; }
    .omn h2 { max-width: 760px; }
    .omn .section-head p { color: #B7C5CF; }
    .omn .section-head p + p { margin-top: 14px; }

    .omn-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 42px;
    }

    .omn-card {
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.045);
      border-radius: 22px;
      padding: 25px;
    }

    .omn-card h3 {
      margin: 0 0 8px;
      font-size: 17px;
    }

    .omn-card p {
      margin: 0;
      color: #AFC0CB;
      font-size: 13px;
    }

    .omn-flow {
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
    }

    .node {
      padding: 9px 11px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 10px;
      font-size: 11px;
      color: #DCE8EF;
      background: rgba(255,255,255,.03);
    }

    .arrow {
      color: #73C5F2;
      font-weight: 800;
    }

    .compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .compare-card {
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 28px;
      background: #fff;
    }

    .compare-card.highlight {
      border-color: #C8E6F6;
      box-shadow: 0 15px 35px rgba(30,143,213,.10);
    }

    .compare-tag {
      display: inline-flex;
      padding: 6px 9px;
      border-radius: 999px;
      background: var(--blue-soft);
      color: var(--blue-dark);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 15px;
    }

    .compare-card h3 {
      margin: 0 0 9px;
      font-size: 21px;
      letter-spacing: -.03em;
    }

    .compare-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .mini-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 18px;
    }

    .metric {
      padding: 12px;
      border-radius: 13px;
      background: var(--surface);
      border: 1px solid var(--line);
    }

    .metric strong {
      display: block;
      font-size: 16px;
      letter-spacing: -.03em;
      margin-bottom: 2px;
    }

    .metric span {
      color: var(--muted);
      font-size: 9px;
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .price-card {
      padding: 28px 22px;
      text-align: center;
    }

    .price-courts {
      font-size: 14px;
      font-weight: 800;
      color: var(--blue-dark);
    }

    .price-amount {
      margin-top: 14px;
      font-size: 40px;
      font-weight: 800;
      letter-spacing: -.04em;
    }

    .price-per {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
    }

    .price-note {
      margin-top: 16px;
      text-align: center;
    }

    .pricing-note {
      font-size: 12px;
      color: var(--muted);
    }

    .pricing-includes-row {
      margin-top: 40px;
      display: grid;
      grid-template-columns: 1.4fr .6fr;
      gap: 32px;
      align-items: center;
    }

    .pricing-includes-row .list {
      margin-top: 0;
    }

    .price-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }

    .cta {
      padding: 100px 0 90px;
    }

    .cta-box {
      padding: 54px;
      border-radius: 28px;
      background: var(--blue);
      color: white;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      box-shadow: 0 24px 55px rgba(30,143,213,.23);
    }

    .cta-box h2 {
      margin-bottom: 10px;
    }

    .cta-box p {
      margin: 0;
      color: rgba(255,255,255,.82);
      max-width: 620px;
      font-size: 15px;
    }

    .cta-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn-white {
      color: var(--blue-dark);
      background: white;
    }

    .btn-ghost {
      color: white;
      border-color: rgba(255,255,255,.26);
      background: transparent;
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 25px 0 35px;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      color: #7C8892;
      font-size: 12px;
    }

    .footer-links {
      display: flex;
      gap: 18px;
    }

    .footer-links a:hover { color: var(--blue); }

    .form-hero {
      padding: 64px 0 20px;
      background:
        radial-gradient(circle at 85% 15%, rgba(30,143,213,.10), transparent 30%),
        #fff;
    }

    .form-hero .kicker { margin-bottom: 10px; }

    .form-hero h1 {
      font-size: clamp(34px, 4.5vw, 50px);
      max-width: 640px;
    }

    .form-hero p {
      color: var(--muted);
      font-size: 16px;
      max-width: 560px;
      margin: 14px 0 0;
    }

    .form-section {
      padding: 30px 0 100px;
    }

    .form-layout {
      display: grid;
      grid-template-columns: 1fr .8fr;
      gap: 32px;
      align-items: start;
    }

    .form-card {
      padding: 30px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 7px;
    }

    .form-input,
    .form-textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      font: inherit;
      font-size: 14px;
      color: var(--ink);
      background: #fff;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .form-input:focus,
    .form-textarea:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px var(--blue-soft);
    }

    .form-textarea {
      resize: vertical;
      min-height: 110px;
    }

    .form-error {
      color: #C0392B;
      font-size: 12px;
      margin-top: 6px;
    }

    .form-check-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 16px;
      font-size: 13px;
      color: var(--muted);
    }

    .form-check-row input {
      margin-top: 3px;
    }

    .form-check-row a {
      color: var(--blue-dark);
      font-weight: 700;
    }

    .form-submit {
      width: 100%;
      margin-top: 6px;
    }

    .form-summary-error {
      background: #FDECEA;
      border: 1px solid #F4C7C0;
      color: #A8362A;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 13px;
      margin-bottom: 20px;
    }

    .form-success-card {
      padding: 44px 34px;
      text-align: center;
    }

    .form-success-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #E9F8EF;
      color: #1B8B46;
      display: grid;
      place-items: center;
      font-size: 24px;
      font-weight: 800;
      margin: 0 auto 18px;
    }

    .form-success-card h2 {
      font-size: 26px;
      margin-bottom: 10px;
    }

    .form-success-card p {
      color: var(--muted);
      font-size: 15px;
      margin: 0 auto 22px;
      max-width: 440px;
    }

    .legal-section {
      padding: 60px 0 100px;
    }

    .legal-section h1 {
      font-size: clamp(30px, 4vw, 42px);
      max-width: 720px;
    }

    .legal-section .updated {
      color: var(--muted);
      font-size: 13px;
      margin: 10px 0 36px;
    }

    .legal-section h2 {
      font-size: 20px;
      margin: 34px 0 10px;
    }

    .legal-section p,
    .legal-section li {
      color: var(--muted);
      font-size: 15px;
    }

    .legal-section ul {
      padding-left: 20px;
    }

    @media (max-width: 980px) {
      .form-layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 980px) {
      .hero-grid,
      .split,
      .pricing-includes-row,
      .cta-box {
        grid-template-columns: 1fr;
      }

      .hero-grid { gap: 40px; }
      .dashboard { transform: none; }
      .feature-grid { grid-template-columns: repeat(2, 1fr); }
      .price-grid { grid-template-columns: repeat(2, 1fr); }
      .omn-grid { grid-template-columns: 1fr; }
      .cta-actions { justify-content: flex-start; }
    }

    @media (max-width: 720px) {
      .wrap {
        width: min(100% - 28px, 1160px);
      }

      .nav-inner { height: 68px; }
      .nav-links {
        display: none;
        position: absolute;
        left: 14px;
        right: 14px;
        top: 74px;
        padding: 14px;
        background: rgba(255,255,255,.98);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(16,24,32,.10);
        flex-direction: column;
        align-items: stretch;
      }

      .nav-links.open { display: flex; }
      .nav-links a { padding: 9px 8px; }
      .nav-buttons { display: none; }
      .menu-btn { display: inline-flex; }
      h1 { font-size: 48px; }
      .hero { padding: 68px 0 60px; }
      .section, .omn, .cta { padding: 76px 0; }
      .feature-grid,
      .compare,
      .stats,
      .mini-metrics {
        grid-template-columns: 1fr;
      }
      .cta-box { padding: 36px 26px; }
      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }


    /* ---------- Motion layer (Apple-style) ---------- */
    :root {
      --ease: cubic-bezier(.16, 1, .3, 1);
      --ease-apple: cubic-bezier(.28, .11, .32, 1);
    }

    .nav {
      background: rgba(255,255,255,.6);
      border-bottom-color: transparent;
      transition: background .5s var(--ease-apple), border-color .5s var(--ease-apple), box-shadow .5s var(--ease-apple);
    }

    .nav.scrolled {
      background: rgba(255,255,255,.72);
      backdrop-filter: saturate(180%) blur(22px);
      -webkit-backdrop-filter: saturate(180%) blur(22px);
      border-bottom-color: rgba(16,24,32,.07);
    }

    .btn,
    .nav-cta {
      border-radius: 999px;
      transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s ease, border-color .3s ease;
    }

    .btn { padding: 0 28px; }

    .btn-primary:hover,
    .btn-secondary:hover,
    .nav-cta:hover {
      transform: translateY(-1px) scale(1.025);
    }

    .btn:active,
    .nav-cta:active {
      transform: scale(.97);
      transition-duration: .12s;
    }

    .section-head p { font-size: 19px; line-height: 1.5; }
    .hero p { font-size: 20px; }

    /* Word-by-word headings */
    .js .hero h1:not(.words),
    .js .form-hero h1:not(.words) {
      opacity: 0;
      animation: reveal-fallback 0s 1.5s forwards;
    }

    @keyframes reveal-fallback { to { opacity: 1; } }

    .w {
      display: inline-block;
      overflow: hidden;
      vertical-align: top;
      /* Padding keeps accents (İ, Ü, ğ), descenders and the last letter of
         negatively tracked headings from being clipped by the mask. */
      padding: .22em .1em .18em;
      margin: -.22em -.1em -.18em;
    }

    .wi {
      display: inline-block;
      transform: translate3d(0, 110%, 0);
      filter: blur(6px);
      transition: transform 1.1s var(--ease), filter 1s var(--ease);
    }

    .words.in .wi {
      transform: none;
      filter: none;
    }

    /* Generic reveal: rise, unblur, fade */
    .m {
      opacity: 0;
      translate: 0 44px;
      filter: blur(8px);
      transition: opacity 1s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease),
                  transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease;
    }

    .m.in {
      opacity: 1;
      translate: 0 0;
      filter: blur(0);
    }

    .feature-card.m:hover,
    .price-card.m:hover {
      transform: translateY(-4px) scale(1.012);
    }

    /* Hero entrance (no JS needed) */
    @media (prefers-reduced-motion: no-preference) {
      .hero .eyebrow,
      .hero p,
      .hero-actions,
      .hero-proof,
      .dashboard {
        animation: hero-in 1.3s var(--ease) both;
      }

      .hero .eyebrow { animation-delay: .05s; }
      .hero p { animation-delay: .55s; }
      .hero-actions { animation-delay: .7s; }
      .hero-proof { animation-delay: .85s; }
      .dashboard { animation-name: hero-dash; animation-delay: .35s; animation-duration: 1.6s; }
    }

    @keyframes hero-in {
      from { opacity: 0; translate: 0 28px; filter: blur(6px); }
      to { opacity: 1; translate: 0 0; filter: blur(0); }
    }

    @keyframes hero-dash {
      from { opacity: 0; translate: 0 70px; scale: .94; filter: blur(8px); }
      to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
    }

    /* Pointer spotlight on cards */
    .spot { position: relative; }

    .spot::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity .5s var(--ease-apple);
      background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(30,143,213,.11), transparent 62%);
    }

    .omn-card.spot::after {
      background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 62%);
    }

    .spot:hover::after { opacity: 1; }

    .cta-box { will-change: transform, opacity; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }