/* ==========================================================================
   COREVIA — Stylesheet
   A premium research-solutions catalogue site.
   Palette: deep navy / matte black / chrome / white / electric blue.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   Everything visual is derived from these variables — change a value here
   and it ripples through the whole site consistently.
   --------------------------------------------------------------------------- */
:root{
  /* Backgrounds */
  --void:        #05060a;   /* near-black base */
  --navy-950:    #070a14;
  --navy-900:    #0b0f1f;
  --navy-800:    #111731;
  --navy-700:    #1a2140;

  /* Chrome / silver neutrals */
  --chrome:      #d9dde6;
  --silver:      #9aa3b8;
  --silver-dim:  #6b7488;

  /* Electric blue accent */
  --blue:        #4d8bff;
  --blue-bright: #7bb0ff;
  --blue-dim:    #23335e;
  --blue-glow:   rgba(77,139,255,.35);

  --white:       #f5f7fc;

  /* Semantic (stock indicators) */
  --success:     #7fe0a8;
  --warning:     #e0b97f;

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;  /* headings — technical, premium */
  --font-body:    'Inter', sans-serif;          /* body copy — neutral, legible */
  --font-mono:    'IBM Plex Mono', monospace;   /* data: prices, stock, labels */

  /* Radii */
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
}

/* ---------------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--void);
  color: var(--chrome);
  font-family: var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }

/* Visible keyboard focus everywhere — accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:3px;
}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------------------------------------------------
   3. AMBIENT BACKGROUND SYSTEM
   A fixed layer of gradients + a particle canvas + a faint hex grid,
   shared by every page so the whole site feels like one continuous space.
   --------------------------------------------------------------------------- */
.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(77,139,255,.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 30%, rgba(77,139,255,.08), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 70%, rgba(77,139,255,.07), transparent 60%),
    linear-gradient(180deg, #05060a 0%, #070a14 30%, #0b0f1f 60%, #05060a 100%);
}
#particle-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
}
.hex-veil{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:
    linear-gradient(30deg, var(--silver) 1px, transparent 1px),
    linear-gradient(150deg, var(--silver) 1px, transparent 1px),
    linear-gradient(90deg, var(--silver) 1px, transparent 1px);
  background-size: 92%;
}

main, header, footer{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------------
   4. NAVIGATION
   Sticky glass bar. Darkens on scroll (state added by script.js).
   --------------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  background: rgba(6,8,16,.25);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
}
.nav.scrolled{
  padding:14px 0;
  background: rgba(5,6,10,.75);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--white);
  display:flex; align-items:center; gap:10px;
}
/* Logo mark: three overlapping rings — reads as an atomic / orbital motif */
.logo-mark{
  width:26px; height:26px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
  position:relative;
  flex-shrink:0;
}
.logo-mark::before, .logo-mark::after{
  content:'';
  position:absolute; inset:0;
  border:1px solid var(--blue-bright);
  border-radius:50%;
  opacity:.5;
}
.logo-mark::before{ transform:scale(.55) rotate(45deg); }
.logo-mark::after{ transform:scale(.55) rotate(-45deg); }

.nav-links{ display:flex; align-items:center; gap:40px; }
.nav-links a{
  font-size:.86rem;
  letter-spacing:.06em;
  color:var(--silver);
  text-transform:uppercase;
  position:relative;
  padding:4px 0;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:var(--blue-bright);
  transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:22px; }
.cart-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:var(--chrome);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.cart-btn:hover{ border-color:var(--blue-bright); background:rgba(77,139,255,.08); }
.cart-count{
  position:absolute; top:-6px; right:-6px;
  background:var(--blue); color:var(--white);
  font-family:var(--font-mono); font-size:.62rem;
  width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

.hamburger{
  display:none;
  flex-direction:column; gap:5px;
  width:24px;
  background:none; border:none;
}
.hamburger span{
  display:block; height:1.5px; width:100%;
  background:var(--chrome);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.hamburger.active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:rgba(5,6,10,.97);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:34px;
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  font-family:var(--font-display);
  font-size:1.6rem; letter-spacing:.06em;
  color:var(--chrome);
}

/* ---------------------------------------------------------------------------
   5. HERO
   Cinematic, full-bleed, centred. The DNA graphic is the page's signature
   element — a slow, ambient rotation behind the headline.
   --------------------------------------------------------------------------- */
.hero{  
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:150px 24px 90px;
  overflow:hidden;
  isolation:isolate;
  
  background-image: url("images/hero.png");
  background-size: 120%;
  background-position: 18% 60%;
  background-repeat: no-repeat;
}
.hero-dna{
  position:absolute; top:50%; left:50%;
  width:360px; height:400px;
  transform:translate(-50%,-50%);
  opacity:.32;
  z-index:0;
  animation: dna-spin 28s linear infinite;
}
@keyframes dna-spin{ from{ transform:translate(-50%,-50%) rotateY(0deg);} to{ transform:translate(-50%,-50%) rotateY(360deg);} }
.hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(
          to bottom,
       rgba(0,0,0,.65),
       rgba(0,0,0,.30),
       rgba(0,0,0,.55)
      );
      z-index:1;
}
.hero-inner{
    position:relative;
    z-index:2;
    max-width: 700px;
    margin:0 auto;
    margin-left:38%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
}
.hero-logo{
  width:52px; height:52px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
  position:relative;
  margin-bottom:30px;
  opacity:0;
  animation: rise .9s var(--ease) 0s forwards;
}
.hero-logo::before, .hero-logo::after{
  content:''; position:absolute; inset:0;
  border:1px solid var(--blue-bright);
  border-radius:50%; opacity:.5;
}
.hero-logo::before{ transform:scale(.55) rotate(45deg); }
.hero-logo::after{ transform:scale(.55) rotate(-45deg); }

.hero-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:26px;
  opacity:0;
  animation: rise .9s var(--ease) .15s forwards;
}
.hero-eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 10px var(--blue-bright); }

.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(4rem, 8vw, 6.8rem);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--white);
  opacity:0;
  animation: rise 1s var(--ease) .3s forwards;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg, var(--blue-bright), var(--chrome) 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-tagline{
  margin-top:22px;
  font-family:var(--font-mono);
  font-size:.95rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blue-bright);
  opacity:0;
  animation: rise 1s var(--ease) .5s forwards;
}

.hero-sub{
  margin-top:20px;
  max-width:520px;
  color:var(--silver);
  font-size:1.2rem;
  opacity:0;
  animation: rise 1s var(--ease) .65s forwards;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:17px 38px;
  border-radius:100px;
  font-size:.92rem;
  letter-spacing:.05em;
  font-weight:500;
  border:1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.btn-primary{
  margin-top:42px;
  background:linear-gradient(135deg, var(--blue), #3467d1);
  color:var(--white);
  opacity:0;
  animation: rise 1s var(--ease) .8s forwards;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 40px -8px var(--blue-glow);
}
.btn-ghost{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.14);
  color:var(--chrome);
}
.btn-ghost:hover{ border-color:var(--blue-bright); color:var(--white); }
.btn-full{ width:100%; }

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------------------------------------------------------------------------
   6. SECTION SHELL + SCROLL REVEAL
   --------------------------------------------------------------------------- */
section{ position:relative; padding:130px 0; }
.section-head{
  text-align:center;
  max-width:600px;
  margin:0 auto 64px;
}
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:14px;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 3.6vw, 2.8rem);
  color:var(--white);
  font-weight:600;
  letter-spacing:-.01em;
}
.section-head p{
  margin-top:16px;
  color:var(--silver);
  font-size:1rem;
}

/* Elements with .reveal fade/slide in once scrolled into view (see script.js) */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------------------------
   7. PRODUCTS
   --------------------------------------------------------------------------- */
.products-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
}

.card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  overflow:hidden;
  backdrop-filter:blur(10px);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(77,139,255,.35);
  box-shadow:0 20px 50px -20px var(--blue-glow), 0 0 0 1px rgba(77,139,255,.12) inset;
}

.card-media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(77,139,255,.25), transparent 55%),
    linear-gradient(155deg, #141b34, #0a0e1c);
}
/* Soft top-edge reflection, reinforcing the glass feel on every card image */
.card-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.10), transparent 40%);
  pointer-events:none;
}
.card-media svg{
  position:absolute; inset:0; margin:auto;
  width:46%; height:46%;
  color:var(--blue-bright);
  opacity:.85;
  transition: transform .6s var(--ease);
}
.card:hover .card-media svg{ transform:scale(1.08) rotate(4deg); }

/* Once a product's `image` field is set in products.js, its <img> fills
   the frame and gets the same hover lift as the placeholder icon — no
   further CSS changes needed when real photography is added. */
.card-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .6s var(--ease);
}
.card:hover .card-media img{ transform:scale(1.06); }

.card-badge{
  position:absolute; top:14px; left:14px;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:100px;
  background:rgba(5,6,10,.6);
  border:1px solid rgba(77,139,255,.3);
  color:var(--blue-bright);
  backdrop-filter:blur(6px);
}

.card-body{
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:12px;
  flex:1;
}
.card-title{
  font-family:var(--font-display);
  font-size:1.08rem;
  color:var(--white);
  font-weight:600;
}
.card-desc{
  font-size:.84rem;
  color:var(--silver-dim);
  line-height:1.55;
}
.card-price-row{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--font-mono);
}
.price-now{ font-size:1.05rem; color:var(--blue-bright); }
.price-was{ font-size:.82rem; color:var(--silver-dim); text-decoration:line-through; }

.card-stock{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--success);
}
.card-stock .dot{ width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); }
.card-stock.low{ color:var(--warning); }
.card-stock.low .dot{ background:var(--warning); box-shadow:0 0 8px var(--warning); }

.qty-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto;
  padding-top:8px;
}
.qty-control{
  display:flex; align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
  overflow:hidden;
}
.card-category{
display:inline-block;
    font-size:10px;
    font-weight:600;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:#6fd8ff;
    margin-bottom:10px;
    padding:4px 8px;
    border:1px solid rgba(99,210,255,.22);
    border-radius:999px;
    background:rgba(25,130,255,.05);
}

.card-cta{
    margin-top:16px;
    ...
}
.qty-control button{
  background:none; border:none; color:var(--chrome);
  width:30px; height:30px;
  font-size:1rem;
  transition:background .2s var(--ease);
}
.qty-control button:hover{ background:rgba(77,139,255,.12); }
.qty-control span{
  width:26px; text-align:center; font-family:var(--font-mono); font-size:.85rem;
}

.card-cta{
  margin-top:16px;
  width:100%;
  padding:13px;
  border-radius:100px;
  background:rgba(77,139,255,.1);
  border:1px solid rgba(77,139,255,.35);
  color:var(--blue-bright);
  font-size:.82rem;
  letter-spacing:.05em;
  font-weight:500;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.card-cta:hover{
  background:var(--blue);
  color:var(--white);
  box-shadow:0 8px 30px -8px var(--blue-glow);
}

/* ---------------------------------------------------------------------------
   8. WHY CHOOSE US
   --------------------------------------------------------------------------- */
.features-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.feature-card{
  padding:36px 26px;
  text-align:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-lg);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.feature-card:hover{ transform:translateY(-6px); border-color:rgba(77,139,255,.3); }
.feature-icon{
  width:52px; height:52px;
  margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle, rgba(77,139,255,.18), transparent 70%);
  color:var(--blue-bright);
}
.feature-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--white);
  margin-bottom:10px;
}
.feature-card p{ font-size:.86rem; color:var(--silver-dim); }

/* ---------------------------------------------------------------------------
   9. ABOUT
   --------------------------------------------------------------------------- */
.about{ text-align:center; }
.about-inner{ max-width:760px; margin:0 auto; }
.about-inner p{
  font-size:1.15rem;
  line-height:1.9;
  color:var(--silver);
}
.about-inner p + p{ margin-top:22px; }
.about-stats{
  display:flex; justify-content:center; gap:64px;
  margin-top:56px;
  flex-wrap:wrap;
}
.about-stat b{
  display:block;
  font-family:var(--font-display);
  font-size:2.2rem;
  color:var(--white);
}
.about-stat span{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--silver-dim);
}

/* ---------------------------------------------------------------------------
   10. FAQ — premium glass accordion
   --------------------------------------------------------------------------- */
.faq-list{ max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.faq-item{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(77,139,255,.16);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 0 24px -14px var(--blue-glow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.faq-item:hover{
  transform:translateY(-3px);
  border-color:rgba(77,139,255,.32);
  box-shadow:0 14px 34px -16px var(--blue-glow);
}
.faq-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 28px;
  background:none; border:none;
  color:var(--white);
  font-family:var(--font-display);
  font-size:1rem;
  text-align:left;
  cursor:pointer;
}
.faq-question .plus{
  flex-shrink:0;
  width:22px; height:22px;
  position:relative;
  margin: left 46%;
  transition: transform .28s var(--ease);
}
.faq-question .plus::before, .faq-question .plus::after{
  content:''; position:absolute; top:50%; left:50%;
  background:var(--blue-bright);
  transform:translate(-50%,-50%);
}
.faq-question .plus::before{ width:14px; height:1.5px; }
.faq-question .plus::after{ width:1.5px; height:14px; }
/* Rotating the whole "+" 45° turns it into an "×" when the card is open */
.faq-item.open .plus{ transform:rotate(45deg); }

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .28s var(--ease);
}
.faq-answer-inner{
  padding:0 18px 42px;
  color:var(--silver-dim);
  font-size:.9rem;
  line-height:1.7;
}

/* ---------------------------------------------------------------------------
   11. CLOSING / TRANSITION SECTION
   Bridges the last content section into the footer with whitespace and glow
   instead of a hard edge.
   --------------------------------------------------------------------------- */
.closing{
  position:relative;
  padding:100px 0 160px;
  overflow:hidden;
  text-align:center;
}
.closing::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(77,139,255,.05) 45%, rgba(5,6,10,.4) 100%);
  pointer-events:none;
}
.closing-glow{
  position:absolute;
  top:10%; left:50%;
  width:640px; height:640px;
  transform:translateX(-50%);
  background: radial-gradient(circle, rgba(77,139,255,.16), transparent 65%);
  filter:blur(10px);
  pointer-events:none;
}
.closing-inner{
  position:relative; z-index:1;
  max-width:640px;
  margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.closing-inner h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 3.6vw, 2.6rem);
  color:var(--white);
  font-weight:600;
  letter-spacing:-.01em;
  margin-top:12px;
}
.closing-inner p{
  margin-top:18px;
  color:var(--silver);
  font-size:1rem;
  max-width:520px;
}
.closing-inner .btn{ margin-top:36px; }

/* ---------------------------------------------------------------------------
   12. FOOTER
   Minimal, symmetrical: brand + tagline on the left, one Contact column
   (with icon links) on the right, thin divider, centred copyright line.
   --------------------------------------------------------------------------- */
footer{
  padding:70px 0 34px;
  background:rgba(5,6,10,.6);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-brand p{
  margin-top:14px; max-width:280px;
  color:var(--silver-dim); font-size:.86rem;
}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--silver); margin-bottom:16px;
}
.footer-col a{
  display:block; color:var(--silver-dim); font-size:.88rem;
  margin-bottom:10px; transition:color .25s var(--ease);
}
.footer-col a:hover{ color:var(--blue-bright); }

/* Social links: icon + label, icon glows and lifts slightly on hover */
.social-link{ display:flex !important; align-items:center; gap:10px; }
.social-link svg{
  width:16px; height:16px; flex-shrink:0;
  color:var(--silver-dim);
  transition: color .25s var(--ease), transform .3s var(--ease);
}
.social-link:hover svg{
  color:var(--blue-bright);
  transform:translateY(-2px);
  filter:drop-shadow(0 0 6px var(--blue-glow));
}

.footer-bottom{
  display:flex; justify-content:center; align-items:center;
  padding-top:28px;
  font-size:.78rem; color:var(--silver-dim);
  text-align:center;
}

/* ---------------------------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .products-grid{ grid-template-columns:repeat(2, 1fr); }
  .features-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .about-stats{ gap:40px; }
}

@media (max-width:768px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .container{ padding:0 22px; }
  section{ padding:84px 0; }
  .hero{ padding:130px 20px 60px; min-height:auto; }
  .closing{ padding:70px 0 100px; }
  .closing-glow{ width:420px; height:420px; }
  .footer-top{ flex-direction:column; gap:32px; }
}

@media (max-width:560px){
  .products-grid{ grid-template-columns:1fr; }
  .features-grid{ grid-template-columns:1fr; }
  .btn-primary{ width:100%; }
  .about-stats{ flex-direction:column; gap:24px; }
}

/* ---------------------------------------------------------------------------
   14. BIOTECH ATMOSPHERE LAYER
   Purely decorative background motifs, unique per section, sitting behind
   real content. Opacity kept low (5-15%) so readability is untouched.
   Each .section-bg is absolutely positioned (inset:0) inside a section
   that already has position:relative from the base `section` rule; the
   matching content wrapper below is bumped to z-index:1 (same trick
   already used by .hero-inner and .closing-inner) so it always paints
   on top of the decoration regardless of DOM order.
   --------------------------------------------------------------------------- */
.section-bg{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.section-bg svg{ width:100%; height:100%; display:block; }

/* Small glowing connection-point used across several motifs, pulsing slowly */
.bg-node{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--blue-bright);
  box-shadow:0 0 10px 2px var(--blue-glow);
  animation: node-pulse 5s ease-in-out infinite;
}
@keyframes node-pulse{
  0%, 100%{ opacity:.3; transform:scale(1); }
  50%{ opacity:.85; transform:scale(1.4); }
}

/* Hero: soft blue bloom + a second, larger helix drifting along the edge */
.hero-bloom{
  position:absolute; top:50%; right:-12%;
  width:520px; height:520px;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(77,139,255,.16), transparent 70%);
  filter:blur(6px);
  z-index:0; pointer-events:none;
}
.hero-dna-edge{
  position:absolute; top:50%; right:-8%;
  width:240px; height:440px;
  transform:translateY(-50%);
  opacity:.13;
  z-index:0; pointer-events:none;
  animation: dna-spin 34s linear infinite reverse;
}

/* Products: faint hexagon / molecular network */
#products .container{ position:relative; z-index:1; }
.products-bg svg{ opacity:.08; }

/* FAQ: subtle blueprint grid */
#faq .container{ position:relative; z-index:1; }
.faq-bg svg{ opacity:.07; }

/* Footer: molecular line-work fading into particles toward the bottom */
footer .container{ position:relative; z-index:1; }
.footer-bg svg{
  opacity:.06;
  mask-image: linear-gradient(180deg, black 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 82%);
}

@media (max-width:768px){
  .hero-dna-edge{ display:none; }
  .hero-bloom{ width:320px; height:320px; right:-24%; }
}