:root {
      --bg-start: #ffffff;
      --bg-end: #FFD97F;
      --text-color: #000000;
      --header: #333333;
      --get-started-color--:  #000000;
      --subtext-color: #000000;
      --case-bg: #ffffff;
      --case-text: #000000;
      --highlight: #FFD97F;
      --video-fade-end: #e6dbc0;
      --form-background: #333333;
    }
    [data-theme="dark"] {
      --bg-start: #111111;
      --bg-end: #333333;
      --text-color: #EEEEEE;
      --header: #ffffff;
      --get-started-color--:  #333333;
      --subtext-color: #CCCCCC;
      --case-bg: #222222;
      --case-text: #ffffff;
      --highlight: #FFD97F;
      --video-fade-end: var(--bg-start);
      --form-background: #000000;
    }

    body {
      margin: 0;
      background: linear-gradient(to bottom, var(--bg-start), var(--bg-end));
      background-size: cover;
      background-attachment: fixed;
      color: var(--text-color);
      font-family: 'Segoe UI', sans-serif;
      transition: background 0.3s, color 0.3s;
    }
    a { text-decoration: none; }

    .container {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
      padding: 4rem 0;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      background: linear-gradient(to bottom right, var(--header), var(--highlight));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
      overflow: hidden;
      animation: typing 3s steps(40,end) 2s forwards;
    }
    @keyframes typing {
      from { width: 0; }
      to   { width: 100%; }
    }

    p {
      font-size: 1rem;
      color: var(--subtext-color);
      margin-bottom: 2rem;
      text-align: center;
    }

    .video-wrapper {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      margin: 2rem 0;
      overflow: hidden;
    }
    .video-wrapper iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
    }
    .video-wrapper::after {
      content: "";
      position: absolute;
      bottom: 0; left: 0;
      width: 100%; height: 100px;
      background: linear-gradient(to bottom, transparent, var(--video-fade-end));
      pointer-events: none;
    }

    .get-started {
      display: inline-block;
      padding: 1rem 2.5rem;
      margin-top: 1rem;
      border-radius: 999px;
      font-size: 1rem;
      font-weight: 600;
      background: var(--highlight);
      color: var(--get-started-color--);
      transition: opacity 0.2s;
    }
    .get-started:hover { opacity: 0.9; }

    .use-cases { margin-top: 3rem; text-align: left; }
    .use-cases h2 { font-size: 2rem; margin-bottom: 1rem; color: var(--text-color); }
    .cases {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
      gap: 1rem;
    }
    .case {
      background: var(--case-bg);
      padding: 1rem;
      border-radius: 8px;
      color: var(--case-text);
      font-size: 1rem;
    }

    @media(max-width:600px) { h1 { font-size: 2rem; } }

    .btn.liquid {
      padding: 0.5rem 1rem;
      font-size: 1rem;
      font-weight: 600;
      border: 2px solid var(--highlight);
      border-radius: 8px;
      background: none;
      color: var(#FFFFFF);
      cursor: pointer;
      overflow: hidden;
      --p: 0%;
      --t: 0s;
      --btn-bg: transparent;
      background:
        linear-gradient(var(--highlight) 0 0) no-repeat calc(200% - var(--p)) 100% / 200% var(--p),
        var(--btn-bg);
      transition:
        background-position 0.3s calc(0.3s - var(--t)),
        background-size 0.3s var(--t),
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
    }
    .btn.liquid:hover {
      --p: 100%;
      --t: 0.3s;
    }
    [data-theme="light"] .btn.liquid:hover {
      --btn-bg: var(--text-color);
      color: var(--highlight);
      border-color: var(--text-color);
    }
    [data-theme="dark"] .btn.liquid:hover {
      --btn-bg: var(--highlight);
      color: #000000;
      border-color: var(--highlight);
    }

    a { color: #888; margin: 0 .5rem; }
    footer a:hover { color: var(--highlight); }