:root {
   --bg: #050505;
   --surface: #0d0d0d;
   --surface-2: #111111;
   --border: rgba(255, 255, 255, 0.08);

   --text: #ffffff;
   --muted: #8b8b8b;

   --ice: #7be7ff;
   --mint: #8bffe1;

   --radius: 24px;
   --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}


/* RESET */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   overflow-x: hidden;
   overflow-x: clip;
}

body {
   font-family: "Inter", sans-serif;

   background:
      radial-gradient(
         circle at 20% 20%,
         rgba(123, 231, 255, 0.08),
         transparent 35%
      ),
      radial-gradient(
         circle at 80% 20%,
         rgba(139, 255, 225, 0.05),
         transparent 35%
      ),
      radial-gradient(
         circle at 50% 100%,
         rgba(123, 231, 255, 0.05),
         transparent 50%
      ),
      var(--bg);

   color: var(--text);

   overflow-x: hidden;
   overflow-x: clip;
}

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

img {
   max-width: 100%;
   display: block;
}

/* <picture> = .webp with a JPG fallback; the box itself takes no space, the <img> inside is styled */
picture {
   display: contents;
}

.container {
   width: min(1200px, 90%);
   margin: auto;
}

section {
   position: relative;
   padding: 120px 0;
}


/* TYPOGRAPHY */

.section-header {
   text-align: center;
   max-width: 800px;
   margin: 0 auto 70px;
}

.section-label {
   display: inline-flex;
   padding: 8px 14px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 999px;
   font-size: 0.75rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--ice);
   margin-bottom: 20px;
   backdrop-filter: blur(20px);
}

.section-header h2 {
   font-family: "Space Grotesk", sans-serif;
   font-size: clamp(2rem, 4vw, 4rem);
   line-height: 1;
   margin-bottom: 16px;
}

.section-header p {
   color: var(--muted);
   font-size: 1.05rem;
}


/* NAV */

.nav {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   width: min(1200px, 92%);
   z-index: 999;
}

.nav-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   padding: 16px 22px;
   background: rgba(255, 255, 255, 0.03);
   backdrop-filter: blur(24px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 18px;
}

.logo {
   font-weight: 800;
   letter-spacing: 3px;
   flex-shrink: 0;
}

.nav-links {
   display: flex;
   gap: 30px;
   font-size: 0.92rem;
   color: #cfcfcf;
}

.nav-links a {
   transition: 0.25s;
}

.nav-links a:hover {
   color: white;
}

.nav-toggle {
   display: none;
   width: 42px;
   height: 42px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--border);
   border-radius: 12px;
   cursor: pointer;
}

.nav-toggle span {
   width: 18px;
   height: 2px;
   background: var(--text);
   border-radius: 2px;
   transition: 0.3s;
}

.nav.open .nav-toggle span:first-child {
   transform: translateY(4px) rotate(45deg);
}

.nav.open .nav-toggle span:last-child {
   transform: translateY(-4px) rotate(-45deg);
}

a:focus-visible,
button:focus-visible {
   outline: 2px solid var(--ice);
   outline-offset: 3px;
}


/* BUTTONS */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 22px;
   border-radius: 14px;
   font-weight: 600;
   transition: 0.3s;
   border: none;
   cursor: pointer;
   white-space: nowrap;
}

.btn-primary {
   background:
      linear-gradient(
         135deg,
         var(--ice),
         var(--mint)
      );

   color: black;
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow:
      0 10px 30px rgba(123, 231, 255, 0.25);
}


/* HERO */

.hero {
   min-height: 100vh;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 80px;
}

.hero-left {
   position: relative;
   z-index: 2;
}

.eyebrow {
   display: inline-block;
   padding: 10px 14px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.02);
   font-size: 0.75rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--ice);
   margin-bottom: 24px;
}

.hero h1 {
   font-family: "Space Grotesk", sans-serif;
   font-size: clamp(4rem, 9vw, 8rem);
   line-height: 0.9;
   letter-spacing: -5px;
   margin-bottom: 22px;
}

.hero p {
   font-size: 1.2rem;
   color: #bdbdbd;
   max-width: 600px;
   margin-bottom: 36px;
}

.hero-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
}

.hero-stats {
   display: flex;
   gap: 40px;
   margin-top: 50px;
}

.hero-stat strong {
   display: block;
   font-size: 1.8rem;
}

.hero-stat span {
   font-size: 0.85rem;
   color: var(--muted);
}

.hero-right {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.hero-right::before {
   content: "";
   position: absolute;
   width: 700px;
   height: 700px;

   background:
      radial-gradient(
         circle,
         rgba(123, 231, 255, 0.2),
         transparent 60%
      );

   filter: blur(40px);
}

.can-placeholder {
   width: 380px;
   height: 520px;
   border-radius: 40px;
   background:
      linear-gradient(
         180deg,
         rgba(255, 255, 255, 0.08),
         rgba(255, 255, 255, 0.02)
      );
   border: 1px solid rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(30px);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   letter-spacing: 2px;
   position: relative;
   z-index: 2;
   overflow: hidden;
   box-shadow: var(--shadow);
}

.can-placeholder img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}


/* COMMON */

.grid {
   display: grid;
   gap: 24px;
}

.card {
   background:
      linear-gradient(
         180deg,
         rgba(255, 255, 255, 0.05),
         rgba(255, 255, 255, 0.02)
      );
   border: 1px solid var(--border);
   backdrop-filter: blur(20px);
   border-radius: var(--radius);
   padding: 32px;
   transition: 0.35s;
}

.card:hover {
   transform: translateY(-6px);
   border-color:
      rgba(123, 231, 255, 0.25);
}


/* FEATURES */

/* 2x2 wide tiles on PC: the photos are wide, square tiles would crop them badly */

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

.feature-card {
   position: relative;
   overflow: hidden;
   min-height: 240px;
   display: flex;
   align-items: center;
   padding: 40px;
}

/* Photo fills the tile, subject kept on the right side */

.feature-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: right center;
   transition: transform 0.6s;
}

.feature-card:hover .feature-bg {
   transform: scale(1.04);
}

/* Dark fade on the left so the text stays readable */

.feature-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
      linear-gradient(
         90deg,
         rgba(5, 8, 9, 0.96) 0%,
         rgba(5, 8, 9, 0.85) 40%,
         rgba(5, 8, 9, 0.2) 75%,
         rgba(5, 8, 9, 0) 100%
      );
}

.feature-text {
   position: relative;
   z-index: 1;
   max-width: 60%;
}

.feature-card h3 {
   margin-bottom: 12px;
   font-size: 1.35rem;
}

.feature-card p {
   color: #a8b0b2;
   font-size: 0.95rem;
   line-height: 1.6;
}

/* How to use: same tiles, a step number instead of an icon; without a photo the text is full width */

.feature-card.no-photo .feature-text {
   max-width: 100%;
}

.step-no {
   margin-bottom: 10px;
   font-family: "Space Grotesk", sans-serif;
   font-size: 1.6rem;
   font-weight: 700;
   line-height: 1;
   color: var(--ice);
}

.howto-note {
   margin-top: 28px;
   text-align: center;
   color: #a8b0b2;
   font-size: 0.9rem;
}


/* PRODUCTS */

.products {
   grid-template-columns: repeat(4, 1fr);
}

.product {
   overflow: hidden;
   position: relative;
   padding: 24px;
}

.product::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background:
      linear-gradient(
         90deg,
         var(--ice),
         var(--mint)
      );
}

.product-image {
   height: 320px;
   margin-bottom: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background:
      radial-gradient(
         circle,
         rgba(123, 231, 255, 0.1),
         transparent 60%
      );
   border-radius: 18px;
}

.product-can {
   width: 180px;
   height: 240px;
   border-radius: 28px;
   background:
      linear-gradient(
         180deg,
         rgba(255, 255, 255, 0.1),
         rgba(255, 255, 255, 0.03)
      );
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   transition: 0.4s;
}

.product-can img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.product:hover .product-can {
   transform: translateY(-10px);
}

.product h3 {
   margin-bottom: 8px;
   font-size: 1.05rem;
}

.product p {
   color: var(--muted);
}

/* Flavor name colors (classes, not inline style: the server CSP blocks style="") */

.flavor-mint {
   color: rgb(100, 225, 255);
}

.flavor-citrus {
   color: rgb(250, 255, 100);
}

.flavor-blueberry {
   color: rgb(0, 30, 255);
}

.flavor-mango {
   color: rgb(199, 129, 0);
}

.flavor-white { color: #ffffff; }
.flavor-green { color: rgb(80, 230, 120); }
.flavor-red { color: rgb(255, 70, 70); }
.flavor-pink { color: rgb(255, 120, 200); }
.flavor-purple { color: rgb(170, 110, 255); }
.flavor-orange { color: rgb(255, 150, 40); }


/* =========================================
   B2B / DISTRIBUTOR TERMS
   QWEN STYLE
========================================= */

.b2b-qwen-layout {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 60px;
   align-items: center;
}


/* LEFT VISUAL */

.b2b-visual {
   min-height: 500px;
   position: relative;
   overflow: hidden;
   border-radius: 12px;
   border: 1px dashed rgba(255, 255, 255, 0.2);
   background:
      radial-gradient(
         circle at 30% 30%,
         rgba(255, 255, 255, 0.05),
         transparent
      );
   display: flex;
   align-items: center;
   justify-content: center;
}

.b2b-visual::before {
   content: "";
   position: absolute;
   width: 350px;
   height: 350px;
   border-radius: 50%;
   background:
      radial-gradient(
         circle,
         rgba(123, 231, 255, 0.18),
         transparent 65%
      );
   filter: blur(25px);
}

.b2b-visual-glow {
   position: absolute;
   width: 180px;
   height: 300px;
   border-radius: 50%;
   background:
      linear-gradient(
         180deg,
         rgba(139, 255, 225, 0.12),
         rgba(123, 231, 255, 0.04)
      );
   filter: blur(10px);
}

.b2b-visual-content {
   position: relative;
   z-index: 2;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

.b2b-visual-label {
   color: var(--mint);
   text-transform: uppercase;
   letter-spacing: 4px;
   font-size: 0.75rem;
}

.b2b-visual-content strong {
   font-family: "Space Grotesk", sans-serif;
   font-size: clamp(3rem, 6vw, 5.5rem);
   line-height: 0.85;
   letter-spacing: -3px;
   background:
      linear-gradient(
         135deg,
         #fff,
         var(--ice)
      );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.b2b-visual-content small {
   color: var(--muted);
   letter-spacing: 3px;
   font-size: 0.7rem;
}


/* RIGHT SPEC BLOCKS */

.spec-blocks {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.spec-item {
   display: grid;
   grid-template-columns: 70px 1fr;
   gap: 20px;
   background:
      rgba(255, 255, 255, 0.03);
   padding: 24px;
   border-left: 2px solid var(--mint);
   border-radius: 12px;
   transition: 0.3s;
}

.spec-item:hover {
   background:
      rgba(255, 255, 255, 0.05);
   transform: translateX(5px);
   border-left-color: var(--ice);
}

.spec-code {
   color: var(--ice);
   font-size: 1.25rem;
   font-weight: 800;
   letter-spacing: 1px;
}

.spec-item h4 {
   color: #fff;
   margin-bottom: 8px;
   font-size: 1rem;
}

.spec-item p {
   font-size: 0.9rem;
   line-height: 1.55;
   color: var(--muted);
}


/* CONTACT */

.contact-box {
   max-width: 900px;
   margin: auto;
   padding: 40px;
   border-radius: 32px;
   background:
      linear-gradient(
         180deg,
         rgba(255, 255, 255, 0.05),
         rgba(255, 255, 255, 0.02)
      );
   border: 1px solid rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(30px);
}

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

input,
textarea {
   width: 100%;
   padding: 16px 18px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: #0b0b0b;
   color: white;
   font-family: inherit;
   font-size: 1rem;
}

input:focus,
textarea:focus {
   outline: none;
   border-color: var(--ice);
}

textarea {
   grid-column: 1 / -1;
   min-height: 140px;
   resize: vertical;
}

.form-submit {
   width: 100%;
   grid-column: 1 / -1;
}

.form-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0;
}

.form-note {
   grid-column: 1 / -1;
   font-size: 0.85rem;
   color: var(--muted);
}

.form-ok { color: var(--mint); font-weight: 600; }
.form-error { color: rgb(255, 110, 110); font-weight: 600; }

.form-note a,
.footer-links a {
   color: var(--ice);
}


/* FOOTER */

footer {
   padding: 60px 20px;
   text-align: center;
   border-top:
      1px solid rgba(255, 255, 255, 0.06);
}

footer p {
   color: var(--muted);
   margin-top: 8px;
}

/* (not "disclaimer": ad blockers hide elements with that name) */
.footer-note {
   font-size: 0.8rem;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

.footer-company {
   font-size: 0.85rem;
   line-height: 1.6;
}

.footer-links {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px 24px;
   margin-top: 16px;
   font-size: 0.9rem;
}


/* LEGAL / DOCS PAGES */

.legal {
   padding: 150px 0 80px;
}

.legal-content {
   max-width: 800px;
   margin: auto;
   color: #cfcfcf;
   line-height: 1.7;
}

.legal-content h1 {
   font-family: "Space Grotesk", sans-serif;
   font-size: clamp(2.2rem, 5vw, 3.5rem);
   line-height: 1.05;
   color: var(--text);
   margin-bottom: 12px;
}

.legal-content > h3 {
   font-size: 1.05rem;
   color: var(--text);
   margin: 28px 0 10px;
}

.legal-content h2 {
   font-size: 1.25rem;
   color: var(--text);
   margin: 40px 0 12px;
}

.legal-content p,
.legal-content ul {
   margin-bottom: 14px;
}

.legal-content ul {
   padding-left: 22px;
}

.legal-content a {
   color: var(--ice);
}

.legal-updated {
   color: var(--muted);
   font-size: 0.9rem;
}

.doc-list {
   display: grid;
   gap: 14px;
   margin-top: 30px;
}

.doc-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
   padding: 20px 24px;
   border-radius: 14px;
   border-left: 2px solid var(--mint);
   background: rgba(255, 255, 255, 0.03);
}

.doc-item h3 {
   font-size: 1rem;
   color: var(--text);
}

.doc-item p {
   margin: 4px 0 0;
   font-size: 0.85rem;
   color: var(--muted);
}

.doc-status {
   flex-shrink: 0;
   font-size: 0.75rem;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--muted);
}


/* REVEAL (hidden only when JS is running, see main.js) */

.js .reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: 0.8s;
}

.js .reveal.visible {
   opacity: 1;
   transform: none;
}


/* TABLET */

@media (max-width: 1100px) {

   .spec-grid {
      grid-template-columns: 1fr 1fr;
   }

   .products {
      grid-template-columns: 1fr 1fr;
   }

   .b2b-qwen-layout {
      grid-template-columns: 1fr;

      gap: 40px;
   }

   .b2b-visual {
      min-height: 350px;
   }
}


/* TABLET / MOBILE */

@media (max-width: 1000px) {

   section {
      padding: 90px 0;
   }

   .hero {
      grid-template-columns: 1fr;
      text-align: center;
      padding-top: 140px;
      gap: 60px;
   }


   .hero-actions {
      justify-content: center;
   }

   .hero-stats {
      justify-content: center;
   }

   .hero-right::before {
      width: 500px;
      height: 500px;
   }

   .nav-links {
      gap: 18px;
   }

   /* Wider images on tablet / mobile */

   .can-placeholder {
      width: min(440px, 88vw);
      height: auto;
      aspect-ratio: 3 / 4;
   }

   .product-image {
      height: auto;
      padding: 24px 0;
   }

   .product-can {
      width: min(85%, 320px);
      height: auto;
      aspect-ratio: 3 / 4;
   }

}


/* MOBILE */

@media (max-width: 768px) {

   .nav {
      top: 10px;
      width: calc(100% - 20px);
   }

   .nav-inner {
      position: relative;
      padding: 10px 10px 10px 18px;
      gap: 10px;
      background: rgba(10, 10, 10, 0.75);
   }

   .logo {
      margin-right: auto;
   }

   .nav-toggle {
      display: flex;
      order: 3;
   }

   /* Links become a dropdown panel under the bar */

   .nav-links {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      padding: 8px;
      font-size: 1rem;
      background: rgba(10, 10, 10, 0.96);
      backdrop-filter: blur(24px);
      border: 1px solid var(--border);
      border-radius: 18px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: 0.25s;
   }

   .nav.open .nav-links {
      opacity: 1;
      visibility: visible;
      transform: none;
   }

   .nav-links a {
      padding: 14px 16px;
      border-radius: 12px;
   }

   .nav-links a:hover {
      background: rgba(255, 255, 255, 0.05);
   }

   .nav-cta {
      padding: 11px 14px;
      font-size: 0.85rem;
      border-radius: 12px;
   }


   .hero {
      min-height: auto;
      padding-top: 110px;
      gap: 40px;
   }

   .eyebrow {
      font-size: 0.65rem;
      letter-spacing: 1.5px;
   }

   .hero h1 {
      font-size: 4rem;
      letter-spacing: -2px;
   }

   .hero p {
      font-size: 1rem;
      line-height: 1.6;
   }

   .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 40px;
   }

   .hero-stat strong {
      font-size: 1.4rem;
   }

   .hero-stat span {
      font-size: 0.75rem;
   }

   .hero-right::before {
      width: 120%;
      height: 120%;
   }

   .can-placeholder {
      border-radius: 30px;
   }


   .section-header {
      margin-bottom: 45px;
   }

   .section-header h2 {
      font-size: 2.2rem;
      line-height: 1.05;
   }

   .section-header p {
      font-size: 0.95rem;
   }


   .spec-grid,
   .products {
      grid-template-columns: 1fr;
   }

   .feature-card {
      min-height: 190px;
   }

   .feature-text {
      max-width: 68%;
   }

   .feature-card h3 {
      font-size: 1.2rem;
   }

   .card {
      padding: 26px;
   }


   .product {
      padding: 20px;
   }


   /* B2B */

   .b2b-qwen-layout {
      gap: 30px;
   }

   .b2b-visual {
      min-height: 300px;
      border-radius: 10px;
   }

   .spec-blocks {
      gap: 14px;
   }

   .spec-item {
      grid-template-columns: 55px 1fr;
      gap: 14px;
      padding: 20px;
   }

   .spec-code {
      font-size: 1rem;
   }

   .spec-item h4 {
      font-size: 0.95rem;
   }

   .spec-item p {
      font-size: 0.82rem;
   }


   /* CONTACT */

   .contact-box {
      padding: 22px;
      border-radius: 24px;
   }

   .form-grid {
      grid-template-columns: 1fr;
   }

   textarea,
   .form-submit {
      grid-column: auto;
   }


   section {
      padding: 80px 0;
   }
}


/* VERY SMALL PHONES */

@media (max-width: 420px) {

   .container {
      width: calc(100% - 32px);
   }

   .nav-cta {
      padding: 10px 12px;
      font-size: 0.78rem;
   }

   .hero h1 {
      font-size: 3.4rem;
   }

   .hero .btn {
      width: 100%;
   }

   .hero-actions {
      width: 100%;
   }

   .section-header h2 {
      font-size: 2rem;
   }

   .b2b-visual {
      min-height: 260px;
   }

   .spec-item {
      grid-template-columns: 1fr;
      gap: 8px;
   }

   footer {
      padding: 45px 16px;
   }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }

   .js .reveal {
      opacity: 1;
      transform: none;
   }
}
/* Maintenance notice (planned maintenance / admin preview), see app/maintenance.py */
.mnt-notice {
   position: fixed;
   left: 50%;
   bottom: 16px;
   transform: translateX(-50%);
   z-index: 200;
   width: max-content;
   max-width: calc(100% - 32px);
   padding: 10px 18px;
   border-radius: 12px;
   background: rgba(10, 10, 10, 0.92);
   border: 1px solid var(--mint);
   color: var(--text);
   font-size: 0.85rem;
   text-align: center;
}