:root {
     --bg: #0b0e12;
     --fg: #e9eef5;
     --muted: #94a3b8;
     --brand: #76fbfd;
     /* accent */
     --card: #121821;
     --ring: #1f2937;
     --maxw: 1100px;
 }

 * {
     box-sizing: border-box;
 }

 @font-face {
     font-family: 'sapiens';
     src: url('./assets/sapiens/Hemphill\ Type\ -\ Sapiens\ Regular.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }

 html,
 body {
     margin: 0;
     padding: 0;
     background: var(--bg);
     color: var(--fg);
     font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
     line-height: 1.5;
 }

 hr {
     height: 1px;
     border: none;
     background: var(--ring);
     color: var(--ring);
     /* optional, for fallback */
     margin: 32px 0;
     /* adjust spacing as needed */
 }

 a {
     color: var(--brand);
     text-decoration: none;
 }

 a:hover {
     text-decoration: underline;
 }

 .container {
     max-width: var(--maxw);
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Header */
 header {
     position: sticky;
     top: 0;
     backdrop-filter: saturate(180%) blur(10px);
     background: color-mix(in oklab, var(--bg) 85%, transparent);
     border-bottom: 1px solid var(--ring);
     z-index: 50;
     padding: 0 20px;
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 0;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .brand img {
     height: 38px;
     width: auto;
 }

 .nav a.btn {
     padding: 8px 12px;
     border: 1px solid var(--ring);
     border-radius: 999px;
 }

 .social {
     display: flex;
     gap: 10px;
 }

 .social a {
     width: 32px;
     height: 32px;
     display: grid;
     place-items: center;
     border: 1px solid var(--ring);
     border-radius: 8px;
 }

 .social-icon {
  width: 24px;
  height: 24px;
  display: block;
  transition: filter 0.2s, color 0.2s;
  filter: brightness(1) invert(0); /* ensures white icons show as white */
}

.social a:hover .social-icon,
.social a:focus .social-icon {
  filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(749%) hue-rotate(153deg) brightness(102%) contrast(101%);
  /* This filter tints white icons to --brand color. Adjust as needed for your icons. */
}

 /* Hero */
 .hero {
     padding: 0;
     position: relative;
 }

 .hero-logo-wrap {
     position: absolute;
     left: 0;
     bottom: 40px;
     width: 40%;
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 24px 48px 60px 48px;
     /* adjust as needed */
 }

 .hero-content {
     position: relative;
     padding: 0 !important;
 }

 .hero-image-wrap {
     position: relative;
     width: 100%;
     aspect-ratio: 16/9;
     /* or whatever ratio fits your image */
     overflow: hidden;
 }

 .hero-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .hero-info {
     width: 100%;
     padding: 0;
     background: var(--bg);
     box-sizing: border-box;
     position: relative;
 }

 .hero h1 {
     font-size: clamp(28px, 5vw, 48px);
     margin: 0 0 12px;
 }

 .tagline {
     font-size: clamp(16px, 2.2vw, 20px);
     color: var(--muted);
     margin: 0 0 16px;
 }

 .hero-card {
     background: linear-gradient(180deg, #0d131d, #0a0f17);
     border: 1px solid var(--ring);
     border-radius: 20px;
     padding: 18px;
 }

 .hero img {
     height: auto;
     display: block;
     width: 100%;
 }

 .gradient-bar {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 120px;
     /* adjust as needed */
     background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
     z-index: 1;
     pointer-events: none;
 }

 /* Sections */
 section {
     padding: 40px 0;
 }

 h1,
 .tagline {
     font-family: 'sapiens', sans-serif;
 }

 h2 {
     font-family: 'sapiens', sans-serif;
     font-size: clamp(20px, 2.5vw, 28px);
     margin: 0 0 14px;
 }

 .lede {
     color: var(--muted);
     max-width: 70ch;
 }

 /* Video */
 .video-wrap {
     position: relative;
     padding-top: 56.25%;
     border: 1px solid var(--ring);
     border-radius: 16px;
     overflow: hidden;
     background: #000;
 }

 .video-wrap iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: 0;
 }

 /* Screenshots */
 .shots-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
 }

 @media (max-width: 900px) {
     .hero-inner {
         grid-template-columns: 1fr;
     }

     .shots-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 520px) {
     .shots-grid {
         grid-template-columns: 1fr;
     }
 }

 figure {
     margin: 0;
 }

 .shot {
     aspect-ratio: 16/9;
     width: 100%;
     object-fit: cover;
     border-radius: 12px;
     border: 1px solid var(--ring);
     cursor: zoom-in;
     display: block;
     background: #0a0f17;
 }

 .shot:hover {
     outline: 1px solid var(--brand);
 }

 dialog#lightbox {
     padding: 0;
     background: transparent;
     border: none;
     box-shadow: none;
     overflow: hidden;
 }

 .dimmer {
     position: fixed;
     inset: 0;
     backdrop-filter: saturate(180%) blur(10px);
     background: color-mix(in oklab, var(--bg) 85%, transparent);
     z-index: 1;
     pointer-events: none;
 }

 #lightbox-img {
     position: relative;
     z-index: 2;
 }

 /* Footer */
 footer {
     padding: 36px 0 56px;
     border-top: 1px solid var(--ring);
 }

 .signup {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
 }

 .signup input[type="email"] {
     flex: 1 1 260px;
     min-width: 220px;
     padding: 12px 14px;
     border-radius: 10px;
     border: 1px solid var(--ring);
     background: var(--card);
     color: var(--fg);
 }

 .signup button {
     padding: 12px 16px;
     border-radius: 10px;
     border: 1px solid var(--ring);
     background: var(--brand);
     color: #001018;
     font-weight: 600;
     cursor: pointer;
 }

 .footbar {
     margin-top: 22px;
     display: flex;
     justify-content: space-between;
     gap: 12px;
     color: var(--muted);
     font-size: 14px;
     flex-wrap: wrap;
 }

 .foot-social {
     display: flex;
     gap: 12px;
 }

 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
 }

 :focus {
     outline: none;
 }

 :focus-visible {
     outline: 2px solid var(--brand);
     border-radius: 12px;
 }