:root {
        --background: hsl(0 0% 100%);
        --foreground: hsl(222.2 47% 11.2%);
        --card: hsl(0 0% 100%);
        --muted-foreground: hsl(215.4 16.3% 46.9%);
        --primary: hsl(262 83% 57%);
        --primary-contrast: hsl(210 40% 98%);
        --accent: hsl(280 70% 60%);
        --border: hsl(214.3 31.8% 91.4%);
        --gradient-primary: linear-gradient(135deg, hsl(262 83% 57% / 0.95), hsl(280 70% 60% / 0.95));
        --gradient-subtle: linear-gradient(180deg, hsl(210 40% 98%), hsl(210 40% 96%));
        --shadow-elegant: 0 10px 30px -10px hsl(262 83% 57% / 0.25);
        --shadow-elevated: 0 12px 40px -16px hsl(220 40% 30% / 0.25);
        --radius: 12px;
      }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        color: var(--foreground); background: var(--gradient-subtle);
      }
      a { color: inherit; text-decoration: none; }
      .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
      header { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; }
      .brand { display: inline-flex; align-items: center; gap: 10px; }
      .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--gradient-primary); box-shadow: var(--shadow-elegant); }
      nav { display: inline-flex; gap: 10px; }
      .btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: white; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
      .btn:hover { transform: translateY(-1px); }
      .btn-hero { background: var(--gradient-primary); color: var(--primary-contrast); border: none; box-shadow: var(--shadow-elegant); }
      .btn-hero:hover { filter: brightness(.98); box-shadow: 0 16px 48px -16px hsl(262 83% 57% / .35); }
      .btn-lg { height: 48px; padding: 0 18px; font-weight: 600; }
      .hero { padding: 28px 0 64px; }
      .grid { display: grid; gap: 40px; align-items: center; }
      @media (min-width: 992px) { .grid { grid-template-columns: 1.1fr 0.9fr; } }
      h1 { font-size: clamp(2rem, 2.5rem + 1vw, 3rem); line-height: 1.1; margin: 0 0 16px; }
      p.lead { color: var(--muted-foreground); font-size: 1.125rem; margin: 0 0 24px; }
      ul.features { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 8px; }
      @media (min-width: 640px) { ul.features { grid-template-columns: repeat(3, minmax(0,1fr)); } }
      .chip { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
      .media { position: relative; }
      .glow { position: absolute; inset: -10% -10% auto -10%; height: 60%; background: radial-gradient(60% 60% at 30% 40%, hsl(262 83% 57% / .25), transparent 70%), radial-gradient(40% 40% at 70% 60%, hsl(280 70% 60% / .2), transparent 70%); filter: blur(24px); }
      .card { position: relative; z-index: 1; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-elevated); background: var(--card); }
      img.responsive { width: 100%; height: auto; display: block; }
      .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
      .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
      @media (prefers-reduced-motion: reduce) { .btn, .btn-hero { transition: none; } }