/* =========================================================
   ClayTablet – Global Stylesheet
   ---------------------------------------------------------
   • Responsive, accessible & lightweight (no framework)
   • Uses CSS variables for easy theming
   • Modern layout (Flexbox + CSS Grid)
   • Subtle motion via prefers-reduced-motion safe-guards
   ======================================================= */

   @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;800&display=swap");

   /* ---------- CSS Variables ---------- */
   :root {
     /* Brand Palette */
     --clr-bg-900: #0e0428;
     --clr-bg-gradient-start: #1b064f;

     --clr-bg-gradient-end: #3d0a78;
   
     --clr-accent: #6d2df5;
     --clr-accent-light: #7d46ff;
   
     --clr-text-100: #ffffff;
     --clr-text-300: #e5e5e5;
     --clr-text-muted: #b6b6c0;
   
     --clr-card-bg: rgba(255, 255, 255, 0.06);
     --clr-card-border: rgba(255, 255, 255, 0.14);
   
     /* Layout */
     --container-max: 1200px;
     --gutter: 1.5rem;
   
     /* Typography */
     --font-base: "Manrope", system-ui, sans-serif;
     --fs-900: clamp(3rem, 8vw, 5rem);
     --fs-700: clamp(1.75rem, 5vw, 2.75rem);
     --fs-500: 1.25rem;
     --fs-400: 1rem;
     --fs-300: 0.875rem;
   
     /* Radius & Shadows */
     --radius: 0.75rem;
     --shadow-1: 0 4px 18px rgba(0, 0, 0, 0.4);
   }
   
   /* ---------- Reset / Utility ---------- */
   *, *::before, *::after {
     box-sizing: border-box;
   }
   
  /* html, body {
    height: 100%;
    min-height: 100%;
  }*/

   body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-400);
    line-height: 1.6;
    color: var(--clr-text-300);
    background: linear-gradient(
      to bottom,
      var(--clr-bg-gradient-end) 0%,
      var(--clr-bg-gradient-start) 40%,
      var(--clr-bg-900) 80%,
     #000 100%
    );
  -webkit-font-smoothing: antialiased;
}

   
   img, video {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   a {
     color: var(--clr-accent);
     text-decoration: none;
   }
   
   button, .btn {
     font: inherit;
     cursor: pointer;
   }
   
   .container {
     width: 100%;
     max-width: var(--container-max);
     padding-inline: var(--gutter);
     margin-inline: auto;
   }
   
   /* ---------- Reusable Components ---------- */
   .btn {
     display: inline-block;
     padding: 0.9em 2.25em;
     border: none;
     border-radius: var(--radius);
     font-weight: 600;
     text-align: center;
     transition: background 0.3s ease;
   }
   
   .btn--primary {
     color: var(--clr-text-100);
     background: var(--clr-accent);
   }
   
   .btn--primary:hover,
   .btn--primary:focus-visible {
     background: var(--clr-accent-light);
   }
   
   .btn--secondary {
     color: var(--clr-accent);
     background: transparent;
     border: 2px solid var(--clr-accent);
   }
   
   .btn--secondary:hover,
   .btn--secondary:focus-visible {
     background: var(--clr-accent);
     color: var(--clr-text-100);
   }
   
   .card {
     background: var(--clr-card-bg);
     backdrop-filter: blur(10px);
     border: 1px solid var(--clr-card-border);
     border-radius: var(--radius);
     padding: 2rem;
     box-shadow: var(--shadow-1);
   }
   
   .section {
     padding-block: clamp(4rem, 8vw, 6rem);
   }
   
   .section__title {
     font-size: var(--fs-700);
     color: var(--clr-text-100);
     margin-block-end: 1rem;
   }
   
   .lead {
     font-size: var(--fs-500);
     color: var(--clr-text-300);
   }
   
   .grid {
     display: grid;
     gap: 2.5rem;
   }
   
   @media (min-width: 768px) {
     .grid--2-cols {
       grid-template-columns: 1.5fr 1fr;
       align-items: center;
     }
   }
   
   /* ---------- HERO ---------- */
   .hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     background:
     linear-gradient(
      to bottom,
      var(--clr-bg-gradient-end) 0%,
      var(--clr-bg-gradient-start) 40%,
      var(--clr-bg-900) 80%,
      #000 100%
     ),
     url("assets/hero.jpg") center / cover no-repeat;
   }
   
   .hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(27, 6, 79, 0.95) 0%, rgba(61, 10, 120, 0.65) 100%);
     backdrop-filter: saturate(160%) blur(4px);
   }
   
   .hero__inner {
     position: relative; /* so z-index above overlay */
     max-width: 40rem;
     padding-block: 3rem;
   }
   
   .hero__title {
     font-size: var(--fs-900);
     color: var(--clr-text-100);
     margin-block: 0 0.25em;
   }
   
   .hero__subtitle {
     font-size: var(--fs-500);
     font-weight: 300;
     color: var(--clr-text-muted);
     margin-block-end: 1.5rem;
   }
   
   .hero__blurb {
     margin-block-end: 2rem;
   }
   
   /* ---------- PROBLEM ---------- */
   .section--problem {
     padding: 6rem 0;
     overflow: hidden;
   }
   
   .section--problem .container {
     max-width: 1200px;
     padding-right: 0;
   }
   
   .section--problem .grid--2-cols {
     grid-template-columns: 1.3fr 1fr;
     margin-left: calc(-1 * var(--gutter) + 2rem);
     padding-left: var(--gutter);
     padding-right: 0;
     gap: 2rem;
   }
   
   .problem__copy {
     grid-column: 2;
     padding-left: 4rem;
     padding-right: 0;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     max-width: none;
     width: 100%;
     margin-left: 2.5rem;
   }
   
   .problem__media {
     grid-column: 1;
     margin-right: 0;
     width: 100%;
   }
   
   .problem__percent {
     font-size: 6rem;
     line-height: 1;
     font-weight: 800;
     color: var(--clr-accent);
     display: block;
     margin-bottom: 1rem;
   }
   
   .section--problem .section__title {
     font-size: 2.2rem;
     margin-bottom: 0.75rem;
     line-height: 1.2;
     padding-right: 0;
   }
   
   .section--problem .lead {
     font-size: 1.1rem;
     line-height: 1.7;
     color: var(--clr-text-300);
     padding-right: 0;
     margin-right: 0;
   }
   
   .problem__video {
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow-1);
   }
   
   /* ---------- SOLUTION ---------- */
   .solution__card {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     padding-bottom: 2.5rem;
   }
   
   .solution__tagline {
     font-size: clamp(2.25rem, 5vw, 3.25rem);
     font-weight: 700;
     line-height: 1.15;
     color: var(--clr-text-100);
     text-transform: capitalize;
   }
   
   /* ---------- FEATURES ---------- */
   .feature-list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: grid;
     gap: 2rem;
     grid-template-columns: repeat(3, 1fr);
     position: relative;
     padding-bottom: 8rem;
   }
   
   .feature {
     text-align: center;
     padding: 2rem 1.5rem;
     background: var(--clr-card-bg);
     border: 1px solid var(--clr-card-border);
     border-radius: var(--radius);
     transition: transform 0.25s ease, background 0.25s ease;
     height: 320px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   
   .feature__icon {
     font-size: 2rem;
     display: grid;
     place-content: center;
     width: 3.25rem;
     height: 3.25rem;
     margin-inline: auto;
     margin-block-end: 1rem;
     background: var(--clr-accent);
     color: var(--clr-text-100);
     border-radius: 0.5rem;
   }
   
   .feature__title {
     font-size: var(--fs-500);
     color: var(--clr-text-100);
     margin-block-end: 0.5rem;
   }
   
   .feature__text {
     font-size: var(--fs-400);
     color: var(--clr-text-muted);
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem 0;
   }
   
   /* Position the last two features in the gaps */
   .feature:nth-last-child(-n+2) {
     position: absolute;
     width: calc(33.333% - 1.33rem);
     top: calc(100% - 4rem);
     height: 320px;
   }
   
   .feature:nth-last-child(2) {
     left: 16.666%;
   }
   
   .feature:nth-last-child(1) {
     left: 50%;
   }
   
   /* Add more space between features and contact sections */
   .section--features {
     padding-bottom: clamp(6rem, 12vw, 10rem);
   }
   
   .section--contact {
     padding-top: clamp(6rem, 12vw, 10rem);
   }
   
   @media (max-width: 1024px) {
     .feature-list {
       grid-template-columns: repeat(2, 1fr);
       padding-bottom: 0;
     }
     
     .feature:nth-last-child(-n+2) {
       position: static;
       width: auto;
       left: auto;
     }
   }
   
   @media (max-width: 640px) {
     .feature-list {
       grid-template-columns: 1fr;
     }
     
     .feature:nth-last-child(-n+2) {
       position: static;
       width: auto;
       left: auto;
     }
   }
   
   .feature:hover {
     transform: translateY(-6px);
     background: rgba(255, 255, 255, 0.08);
   }
   
   /* ---------- CONTACT ---------- */
   .contact-form {
     display: grid;
     gap: 1.25rem;
     background: var(--clr-card-bg);
     border: 1px solid var(--clr-card-border);
     border-radius: var(--radius);
     padding: 2.5rem 2rem;
     box-shadow: var(--shadow-1);
     max-width: 48rem;
     margin-inline: auto;
   }
   
   .form-row {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }
   
   @media (min-width: 520px) {
     .form-row {
       flex-direction: row;
     }
   }
   
   .form-control {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
   
   label {
     font-size: var(--fs-300);
     font-weight: 600;
     color: var(--clr-text-100);
   }
   
   input,
   textarea {
     padding: 0.75rem 1rem;
     border: 1px solid transparent;
     border-radius: 0.5rem;
     font-size: var(--fs-400);
     font-family: inherit;
     color: var(--clr-bg-900);
   }
   
   input:focus-visible,
   textarea:focus-visible {
     outline: 2px solid var(--clr-accent);
     outline-offset: 2px;
   }
   
   textarea {
     resize: vertical;
     min-height: 150px;
   }
   
   /* ---------- FOOTER ---------- */
   .footer {
    background: rgba(0,0,0,0.85); /* Makes the footer see-through so the gradient shows! */
    color: var(--clr-text-muted);
    padding-block: 2rem;
    text-align: center;
    font-size: var(--fs-300);
  }

   
   .footer a {
     color: var(--clr-text-100);
   }
   
   /* ---------- Motion ---------- */
   @media (prefers-reduced-motion: no-preference) {
     .hero__title {
       animation: slideDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
     }
   
     @keyframes slideDown {
       0% {
         opacity: 0;
         transform: translateY(-40px);
       }
       100% {
         opacity: 1;
         transform: translateY(0);
       }
     }
   }
   
   /* ---------- Dark Theme Scrollbar (WebKit) ---------- */
   html::-webkit-scrollbar {
     width: 12px;
   }
   html::-webkit-scrollbar-track {
     background: var(--clr-bg-900);
   }
   html::-webkit-scrollbar-thumb {
     background: var(--clr-accent);
     border-radius: 6px;
   }
   
   /* ---------- Base Mobile Adjustments ---------- */
   @media (max-width: 768px) {
     .container {
       padding-inline: 2rem;
       margin: 0 auto;
       width: 100%;
       max-width: 100%;
     }

     .section {
       padding-block: 3rem;
       width: 100%;
     }

     .section__title {
       font-size: clamp(1.5rem, 4vw, var(--fs-700));
       line-height: 1.3;
     }

     .lead {
       font-size: clamp(1rem, 3vw, 1.1rem);
       line-height: 1.5;
     }
   }

   /* ---------- HERO Mobile Adjustments ---------- */
   @media (max-width: 768px) {
     .hero {
       min-height: 80vh;
       background-position: center;
     }

     .hero__inner {
       max-width: 100%;
       padding-block: 2rem;
     }

     .hero__title {
       font-size: clamp(2rem, 6vw, var(--fs-900));
       line-height: 1.2;
     }

     .hero__subtitle {
       font-size: clamp(1rem, 3vw, 1.1rem);
       line-height: 1.5;
     }
   }

   /* ---------- PROBLEM Section Mobile Adjustments ---------- */
   @media (max-width: 768px) {
     .section--problem {
       padding: 3rem 0;
       width: 100%;
     }

     .section--problem .container {
       padding: 0;
       max-width: 100%;
       margin: 0 auto;
     }

     .section--problem .grid--2-cols {
       grid-template-columns: 1fr;
       margin: 0 auto;
       padding: 0;
       gap: clamp(2rem, 5vw, 3rem);
       width: 100%;
     }

     .problem__copy {
       grid-column: 1;
       padding: 0 clamp(1.5rem, 4vw, 2.5rem);
       margin: 0 auto;
       order: 2;
       width: 100%;
       text-align: center;
     }

     .problem__media {
       grid-column: 1;
       order: 1;
       width: 100%;
       margin: 0 auto;
       padding: 0 clamp(1.5rem, 4vw, 2.5rem);
     }

     .problem__video {
       width: 100%;
       aspect-ratio: 16/9;
       object-fit: cover;
       margin: 0 auto;
       padding: 0;
       display: block;
       border-radius: var(--radius);
     }

     .problem__percent {
       font-size: clamp(3rem, 8vw, 4rem);
       line-height: 1.1;
       margin: 0 auto 1.5rem;
       text-align: center;
       display: block;
     }

     .section--problem .section__title {
       font-size: clamp(1.5rem, 4vw, 2.2rem);
       line-height: 1.3;
       padding: 0 clamp(1.5rem, 4vw, 2.5rem);
       margin: 0 auto 1.5rem;
       text-align: center;
     }

     .section--problem .lead {
       font-size: clamp(1rem, 3vw, 1.1rem);
       line-height: 1.5;
       padding: 0 clamp(1.5rem, 4vw, 2.5rem);
       margin: 0 auto 1.5rem;
       text-align: center;
     }

     .solution__card {
       padding: 0 clamp(1.5rem, 4vw, 2.5rem) 3rem;
       margin: 0 auto;
       width: 100%;
       max-width: min(calc(100% - 3rem), 600px);
     }

     .solution__tagline {
       font-size: clamp(1.75rem, 5vw, 3.25rem);
       line-height: 1.2;
       text-align: center;
       margin: 0 auto;
     }
   }

   /* ---------- FEATURES Mobile Adjustments ---------- */
   @media (max-width: 768px) {
     .feature-list {
       grid-template-columns: 1fr;
       padding-bottom: 0;
       gap: clamp(1.25rem, 3vw, 1.5rem);
       margin: 0 auto;
       width: 100%;
     }

     .feature {
       height: auto;
       min-height: min(280px, 80vw);
       margin: 0 auto;
       width: 100%;
       padding: clamp(1.5rem, 4vw, 2rem);
     }

     .feature__title {
       font-size: clamp(1.1rem, 3vw, var(--fs-500));
       line-height: 1.3;
     }

     .feature__text {
       font-size: clamp(0.9rem, 2.5vw, var(--fs-400));
       line-height: 1.5;
     }
   }

   /* ---------- CONTACT Form Mobile Adjustments ---------- */
   @media (max-width: 768px) {
     .contact-form {
       padding: clamp(1.25rem, 4vw, 1.5rem) clamp(1.5rem, 4vw, 2rem);
       margin: 0 auto;
       width: 100%;
       max-width: min(calc(100% - 3rem), 600px);
     }

     .form-row {
       gap: clamp(0.75rem, 2vw, 1rem);
       width: 100%;
     }

     .form-control {
       min-width: 100%;
       margin: 0 auto;
     }

     input,
     textarea {
       width: 100%;
       margin: 0 auto;
       font-size: clamp(0.9rem, 2.5vw, var(--fs-400));
     }

     label {
       font-size: clamp(0.8rem, 2.5vw, var(--fs-300));
     }
   }

   /* ---------- Additional Mobile Breakpoint ---------- */
   @media (max-width: 360px) {
     .container {
       padding-inline: 1.25rem;
     }

     .section {
       padding-block: 2rem;
     }

     .btn {
       padding: 0.7em 1.25em;
       font-size: clamp(0.9rem, 2.5vw, var(--fs-400));
     }

     .problem__copy,
     .problem__media,
     .section--problem .section__title,
     .section--problem .lead,
     .solution__card {
       padding: 0 1.25rem;
     }

     .solution__card {
       padding-bottom: 2rem;
     }

     .contact-form {
       padding: 1.25rem;
     }
   }