/* Novapep — site styles. Extends novapep-tokens.css. */

/* ============================================================ LANGUAGE FADE */
body { transition: opacity 200ms var(--ease-out); }
body.np-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ============================================================ LAYOUT */
.np-wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.np-section { padding:112px 0; }
.np-section--bone { background:var(--np-bone); }
.np-section--paper { background:var(--np-paper); }
.np-section--deep { background:var(--np-deep); color:var(--np-bone); }
.np-section__header { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:56px; flex-wrap:wrap; }
.np-section__title { font-size:clamp(36px,5vw,60px); font-weight:500; letter-spacing:-.025em; line-height:1.0; margin:0; max-width:720px; text-wrap:balance; color:inherit; }
.np-section--deep .np-section__title { color:var(--np-bone); }
.np-section__title em { font-style:normal; color:var(--np-deep-500); }
.np-section--deep .np-section__title em { color:var(--np-volt); }
.np-section__sub { font-size:18px; line-height:1.55; color:var(--fg-2); max-width:520px; margin:0; }
.np-section--deep .np-section__sub { color:rgba(244,241,234,.7); }
.np-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.01em; color:var(--fg-3); font-weight:500; margin-bottom:18px; }
.np-eyebrow--volt { color:var(--np-volt); }
.np-eyebrow--volt::before { content:""; width:28px; height:1px; background:var(--np-volt); }
.np-section--deep .np-eyebrow { color:rgba(244,241,234,.55); }

/* ============================================================ NAV */
.np-nav {
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; align-items:center; gap:28px;
  background:rgba(244,241,234,.62);
  border:1px solid rgba(14,52,59,.08);
  border-radius:999px; padding:8px 8px 8px 22px;
  width:min(1180px, calc(100vw - 32px));
  transition:background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), backdrop-filter var(--t-base);
}
.np-nav.is-scrolled {
  background:rgba(244,241,234,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 4px 14px rgba(14,52,59,.08);
}
.np-nav__brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--np-deep); }
.np-nav__brand img { height:22px; width:auto; display:block; }
.np-nav__links { display:flex; gap:26px; font-size:14px; color:var(--fg-2); margin-left:4px; }
.np-nav__links a { color:inherit; cursor:pointer; }
.np-nav__links a.is-active { color:var(--np-deep); font-weight:500; }
.np-nav__right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.np-nav__toggle { display:none; background:none; border:0; cursor:pointer; color:var(--np-deep); padding:8px; margin-left:auto; }
.np-nav__toggle svg { display:block; }

/* mobile drawer */
.np-mobilemenu { position:fixed; inset:0; z-index:79; background:var(--np-deep); color:var(--np-bone);
  display:none; flex-direction:column; padding:96px 28px 40px; }
.np-mobilemenu.is-open { display:flex; }
.np-mobilemenu a:not(.np-btn) { color:var(--np-bone); font-size:28px; font-weight:500; letter-spacing:-.02em; padding:14px 0; border-bottom:1px solid var(--line-on-deep); }
.np-mobilemenu .np-btn { margin-top:28px; justify-content:center; }
.np-mobilemenu a.np-btn--volt { color:var(--np-deep); } /* deep-green text on the volt button (was inheriting bone) */

/* ============================================================ BUTTONS */
.np-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:999px; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:500; letter-spacing:-.005em; white-space:nowrap;
  transition:background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform 80ms, opacity var(--t-fast);
}
.np-btn--sm { height:36px; padding:0 16px; font-size:13px; }
.np-btn--lg { height:54px; padding:0 28px; font-size:16px; }
.np-btn--block { width:100%; }
.np-btn:active { transform:translateY(1px); transition-duration:80ms; }
.np-btn svg { width:18px; height:18px; }
.np-btn--primary { background:var(--np-deep); color:var(--np-bone); }
.np-btn--primary:hover { background:var(--np-deep-700); }
.np-btn--volt { background:var(--np-volt); color:var(--np-deep); }
.np-btn--volt:hover { background:var(--np-volt-400); transform:translateY(-1px); }
.np-btn--secondary { background:transparent; color:var(--np-deep); border:1px solid rgba(14,52,59,.18); }
.np-btn--secondary:hover { background:rgba(14,52,59,.04); }
.np-btn--on-deep { background:transparent; color:var(--np-bone); border:1px solid rgba(244,241,234,.18); }
.np-btn--on-deep:hover { background:rgba(244,241,234,.06); }
.np-btn--ghost { background:transparent; color:var(--np-deep); padding:0 8px; }
.np-btn--ghost:hover { opacity:.7; }

/* ============================================================ CHIPS */
.np-chip {
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  border-radius:999px; font-size:12px; font-weight:500; letter-spacing:-.005em;
  background:var(--np-bone); color:var(--np-deep); border:1px solid rgba(14,52,59,.08);
}
.np-chip--deep { background:var(--np-deep); color:var(--np-bone); border-color:transparent; }
.np-chip--volt { background:var(--np-volt); color:var(--np-deep); border-color:transparent; }
.np-chip--outline { background:transparent; color:var(--np-deep); border-color:rgba(14,52,59,.25); }
.np-chip--on-deep { background:rgba(244,241,234,.10); color:var(--np-bone); border-color:rgba(244,241,234,.12); }
.np-chip__dot { width:6px; height:6px; border-radius:999px; background:currentColor; opacity:.6; }

/* ============================================================ HERO */
.np-hero { background:var(--np-deep); color:var(--np-bone); padding:184px 0 96px; position:relative; overflow:hidden; }
.np-hero::after { /* the single permitted radial vignette */
  content:""; position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(6,26,30,.55) 0%, rgba(6,26,30,0) 60%);
  pointer-events:none; z-index:0;
}
.np-hero__inner { position:relative; z-index:1; }
.np-hero__title { font-size:clamp(56px,9vw,140px); font-weight:500; letter-spacing:-.04em; line-height:.92; margin:28px 0 0; text-wrap:balance; color:var(--np-bone); }
.np-hero__title em { font-style:normal; color:var(--np-volt); }
.np-hero__lede { max-width:560px; margin:32px 0 0; font-size:19px; line-height:1.5; color:rgba(244,241,234,.78); }
.np-hero__cta { display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; }
.np-hero__meta { display:flex; gap:40px; margin-top:64px; border-top:1px solid rgba(244,241,234,.12); padding-top:28px; flex-wrap:wrap; }
.np-hero__meta-item { display:flex; flex-direction:column; gap:4px; }
.np-hero__meta-label { font-size:13px; letter-spacing:.01em; color:rgba(244,241,234,.55); }
.np-hero__meta-value { font-size:22px; font-weight:500; letter-spacing:-.015em; }

/* page header (sub-pages) */
.np-pagehead { background:var(--np-deep); color:var(--np-bone); padding:184px 0 80px; position:relative; overflow:hidden; }
.np-pagehead__title { font-size:clamp(44px,7vw,96px); font-weight:500; letter-spacing:-.035em; line-height:.96; color:var(--np-bone); margin:20px 0 0; }
.np-pagehead__title em { font-style:normal; color:var(--np-volt); }
.np-pagehead__lede { max-width:580px; margin:28px 0 0; font-size:19px; line-height:1.5; color:rgba(244,241,234,.78); }

/* ============================================================ VALUE BAND */
.np-value { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.np-value__title { font-size:clamp(32px,4.4vw,52px); font-weight:500; letter-spacing:-.025em; line-height:1.04; }
.np-value__title em { font-style:normal; color:var(--np-deep-500); }
.np-value__list { display:flex; flex-direction:column; gap:24px; margin:0; padding:0; list-style:none; }
.np-value__item { display:flex; gap:16px; align-items:flex-start; }
.np-value__item svg { flex:none; width:24px; height:24px; color:var(--np-deep); margin-top:2px; }
.np-value__item h4 { font-size:18px; font-weight:600; margin:0 0 4px; }
.np-value__item p { font-size:15px; color:var(--fg-2); }

/* ============================================================ PRODUCT CARDS */
.np-products { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.np-product {
  background:var(--np-paper); border-radius:24px; padding:28px;
  display:flex; flex-direction:column; gap:12px; border:1px solid var(--line-1);
  cursor:pointer; text-align:left; color:inherit;
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  min-height:360px;
}
.np-product:hover { transform:translateY(-3px); box-shadow:var(--shadow-2); opacity:1; }
.np-product__viz { background:var(--np-bone); border-radius:16px; aspect-ratio:1.6/1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.np-product__viz--volt { background:var(--np-volt); }
.np-product__viz--deep { background:var(--np-deep); }
.np-product__viz svg.vialviz { width:62%; height:auto; }
/* real product photo (assets/products/<slug>.jpg) overlays the placeholder; onerror removes it if absent */
.np-product__viz .np-img, .np-pdp__viz .np-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.np-product__eyebrow { font-size:13px; letter-spacing:.01em; color:var(--fg-3); margin-top:6px; font-weight:500; }
.np-product__title { font-size:24px; font-weight:500; letter-spacing:-.015em; line-height:1.05; margin:0; color:var(--np-deep); }
.np-product__desc { font-size:14px; line-height:1.5; color:var(--fg-2); margin:0; }
.np-product__meta { display:flex; gap:6px; margin-top:auto; flex-wrap:wrap; align-items:center; }
.np-product__price { margin-left:auto; font-size:16px; font-weight:500; color:var(--np-deep); letter-spacing:-.01em; }

/* ============================================================ FILTERS */
.np-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.np-filter {
  height:36px; padding:0 16px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:500; letter-spacing:-.005em;
  background:transparent; color:var(--np-deep); border:1px solid rgba(14,52,59,.18);
  transition:background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.np-filter:hover { background:rgba(14,52,59,.04); }
.np-filter.is-active { background:var(--np-deep); color:var(--np-bone); border-color:transparent; }
.np-products__count { font-family:var(--font-mono); font-size:13px; color:var(--fg-3); margin-bottom:20px; }

/* ============================================================ SINGLE PRODUCT */
.np-pdp { padding:148px 0 0; }
.np-breadcrumb { font-size:13px; color:var(--fg-3); display:flex; gap:8px; align-items:center; margin-bottom:32px; flex-wrap:wrap; }
.np-breadcrumb a { color:var(--fg-3); }
.np-breadcrumb a:hover { color:var(--np-deep); opacity:1; }
.np-pdp__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.np-pdp__media { position:sticky; top:120px; }
.np-pdp__viz { background:var(--np-bone); border-radius:28px; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.np-pdp__viz--deep { background:var(--np-deep); }
.np-pdp__viz--volt { background:var(--np-volt); }
.np-pdp__viz svg.vialviz { width:52%; height:auto; }
.np-pdp__thumbs { display:flex; gap:12px; margin-top:12px; }
.np-pdp__thumb { width:72px; height:72px; border-radius:14px; background:var(--np-bone); border:1px solid var(--line-1); display:flex; align-items:center; justify-content:center; }
.np-pdp__thumb svg { width:60%; height:auto; }

.np-pdp__peptide { font-size:13px; letter-spacing:.01em; color:var(--fg-3); font-weight:500; }
.np-pdp__title { font-size:clamp(36px,5vw,52px); font-weight:500; letter-spacing:-.025em; line-height:1.0; margin:10px 0 0; }
.np-pdp__lede { font-size:18px; line-height:1.55; color:var(--fg-2); margin:20px 0 0; }
.np-pdp__attrs { display:flex; gap:6px; flex-wrap:wrap; margin:24px 0 0; }
.np-pdp__price { font-size:34px; font-weight:500; letter-spacing:-.02em; color:var(--np-deep); margin:22px 0 0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.np-pdp__price:empty { display:none; }
.np-pdp__price-now { color:var(--np-deep); }
.np-pdp__price-was { font-size:20px; font-weight:400; color:var(--fg-3); text-decoration:line-through; }
.np-pdp__price-save { font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--np-deep); background:var(--np-volt); padding:5px 12px; border-radius:999px; align-self:center; }

.np-pdp__block { margin-top:32px; }
.np-pdp__block-label { font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--fg-1); margin-bottom:12px; }
.np-variants { display:flex; gap:8px; flex-wrap:wrap; }
.np-variant {
  height:40px; padding:0 18px; border-radius:999px; cursor:pointer; font-family:var(--font-mono);
  font-size:13px; background:transparent; color:var(--np-deep); border:1px solid rgba(14,52,59,.18);
  transition:background var(--t-base), border-color var(--t-base);
}
.np-variant:hover { background:rgba(14,52,59,.04); }
.np-variant.is-active { background:var(--np-deep); color:var(--np-bone); border-color:transparent; }

/* purchase options (one-time / subscription) */
.np-plans { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.np-plan {
  display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:18px;
  border:1px solid var(--line-2); background:var(--np-paper); cursor:pointer; text-align:left; width:100%;
  font-family:inherit; transition:border-color var(--t-base), background var(--t-base);
}
.np-plan:hover { border-color:var(--np-deep-400); }
.np-plan.is-active { border-color:var(--np-deep); background:var(--np-bone); }
.np-plan__radio { flex:none; width:20px; height:20px; border-radius:999px; border:2px solid var(--line-2); position:relative; transition:border-color var(--t-base); }
.np-plan.is-active .np-plan__radio { border-color:var(--np-deep); }
.np-plan.is-active .np-plan__radio::after { content:""; position:absolute; inset:3px; border-radius:999px; background:var(--np-deep); }
.np-plan__body { flex:1; }
.np-plan__name { font-size:15px; font-weight:600; color:var(--np-deep); display:flex; align-items:center; gap:8px; }
.np-plan__desc { font-size:13px; color:var(--fg-2); margin-top:3px; }
.np-plan__tag { font-size:11px; font-weight:600; letter-spacing:.02em; background:var(--np-volt); color:var(--np-deep); padding:3px 9px; border-radius:999px; }
.np-plan__save { font-size:13px; font-weight:600; letter-spacing:.01em; background:var(--np-volt); color:var(--np-deep); padding:4px 12px; border-radius:999px; box-shadow:0 0 0 3px rgba(233,254,83,.28); }

.np-pdp__cta { margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.np-pdp__note { font-size:13px; color:var(--fg-3); display:flex; gap:8px; align-items:center; }
.np-pdp__note svg { width:16px; height:16px; flex:none; }

/* spec list */
.np-specs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-1); border:1px solid var(--line-1); border-radius:16px; overflow:hidden; margin-top:14px; }
.np-spec { background:var(--np-paper); padding:16px 18px; }
.np-spec__k { font-size:12px; color:var(--fg-3); letter-spacing:.01em; }
.np-spec__v { font-size:15px; color:var(--np-deep); font-weight:500; margin-top:3px; font-family:var(--font-mono); }

/* benefits / designed to support */
.np-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.np-benefit { background:var(--np-paper); border:1px solid var(--line-1); border-radius:20px; padding:28px; }
.np-benefit svg { width:28px; height:28px; color:var(--np-deep); }
.np-benefit h4 { font-size:18px; font-weight:600; margin:16px 0 6px; }
.np-benefit p { font-size:14px; line-height:1.55; color:var(--fg-2); }

/* ============================================================ ACCORDION (PDP) */
.np-accordion { max-width:840px; }
.np-acc { border-top:1px solid var(--line-2); }
.np-acc:last-child { border-bottom:1px solid var(--line-2); }
.np-acc > summary {
  list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; gap:16px;
  font-size:20px; font-weight:500; letter-spacing:-.015em; color:var(--np-deep);
}
.np-acc > summary::-webkit-details-marker { display:none; }
.np-acc > summary::after { content:"+"; margin-left:auto; flex:none; font-size:24px; font-weight:400; line-height:1; color:var(--np-deep-500); }
.np-acc[open] > summary::after { content:"\2013"; }
.np-acc__body { padding:0 4px 26px; max-width:720px; }
.np-acc__body p { font-size:16px; line-height:1.62; color:var(--fg-2); margin-bottom:14px; }
.np-acc__body p:last-child { margin-bottom:0; }
.np-acc__body strong { color:var(--np-deep); font-weight:600; }
.np-acc__body ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.np-acc__body li { font-size:16px; line-height:1.55; color:var(--fg-2); }
.np-acc__note { font-size:13px; color:var(--fg-3); margin-top:4px; }
.np-acc__link { display:inline-block; margin-top:6px; font-size:14px; font-weight:500; color:var(--np-deep); text-decoration:underline; text-underline-offset:3px; }
.np-acc__link:hover { opacity:.7; }
.np-faqs { display:block; }
.np-faq { border-top:1px solid var(--line-1); }
.np-faq:first-child { border-top:0; }
.np-faq > summary {
  list-style:none; cursor:pointer; padding:15px 4px; display:flex; align-items:center; gap:12px;
  font-size:16px; font-weight:600; color:var(--np-deep);
}
.np-faq > summary::-webkit-details-marker { display:none; }
.np-faq > summary::after { content:"+"; margin-left:auto; font-size:20px; font-weight:400; color:var(--np-deep-500); line-height:1; }
.np-faq[open] > summary::after { content:"\2013"; }
.np-faq .np-acc__body { padding:0 4px 16px; }

/* ============================================================ STATS (science) */
.np-science { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.np-stat { background:rgba(244,241,234,.06); border:1px solid rgba(244,241,234,.12); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:8px; min-height:200px; }
.np-stat__label { font-size:13px; font-weight:500; letter-spacing:.01em; color:rgba(244,241,234,.55); }
.np-stat__value { font-size:56px; font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--np-bone); font-feature-settings:"tnum"; }
.np-stat__value .unit { font-size:22px; font-weight:400; opacity:.55; margin-left:6px; }
.np-stat__caption { font-size:13px; color:rgba(244,241,234,.55); margin-top:auto; line-height:1.4; }
.np-stat--volt { background:var(--np-volt); border-color:transparent; }
.np-stat--volt .np-stat__label { color:rgba(14,52,59,.6); }
.np-stat--volt .np-stat__value { color:var(--np-deep); }
.np-stat--volt .np-stat__caption { color:rgba(14,52,59,.6); }

/* ============================================================ STEPS */
.np-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.np-step { display:flex; flex-direction:column; gap:14px; padding-top:28px; border-top:1px solid rgba(244,241,234,.18); }
.np-section--bone .np-step, .np-section--paper .np-step { border-top-color:var(--line-2); }
.np-step__num { font-family:var(--font-mono); font-size:12px; color:var(--np-volt); }
.np-section--bone .np-step__num, .np-section--paper .np-step__num { color:var(--np-deep-500); }
.np-step__title { font-size:22px; font-weight:500; letter-spacing:-.015em; margin:0; color:var(--np-bone); }
.np-section--bone .np-step__title, .np-section--paper .np-step__title { color:var(--np-deep); }
.np-step__desc { font-size:14px; line-height:1.5; color:rgba(244,241,234,.7); margin:0; }
.np-section--bone .np-step__desc, .np-section--paper .np-step__desc { color:var(--fg-2); }

/* ============================================================ TIKTOK SLIDER */
.np-slider { position:relative; }
.np-slider__track {
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.np-slider__track::-webkit-scrollbar { display:none; }
.np-slider__track .np-tiktok__card { flex:0 0 auto; width:clamp(220px,23vw,280px); scroll-snap-align:start; }
.np-slider__nav {
  position:absolute; top:calc(50% - 7px); transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--np-paper); color:var(--np-deep); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2); transition:background var(--t-base), transform 80ms;
}
.np-slider__nav:hover { background:var(--np-bone); opacity:1; }
.np-slider__nav:active { transform:translateY(-50%) scale(.94); }
.np-slider__nav svg { width:22px; height:22px; }
.np-slider__nav--prev { left:-12px; }
.np-slider__nav--next { right:-12px; }
.np-tiktok__card { aspect-ratio:9/16; border-radius:20px; overflow:hidden; background:var(--np-deep-900); position:relative; border:1px solid var(--line-on-deep); }
.np-section--bone .np-tiktok__card, .np-section--paper .np-tiktok__card { border-color:var(--line-1); }
.np-tiktok__card iframe, .np-tiktok__card video { width:100%; height:100%; border:0; display:block; object-fit:cover; }
.np-tiktok__placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:rgba(244,241,234,.6); text-align:center; padding:20px; }
.np-tiktok__placeholder svg { width:32px; height:32px; color:rgba(244,241,234,.5); }
.np-tiktok__placeholder span { font-size:13px; line-height:1.4; }
.np-section--bone .np-tiktok__placeholder, .np-section--paper .np-tiktok__placeholder { color:var(--fg-3); }
.np-section--bone .np-tiktok__placeholder svg, .np-section--paper .np-tiktok__placeholder svg { color:var(--fg-muted); }

/* ============================================================ CTA / FORMBAND */
.np-formband { background:var(--np-volt); padding:96px 0; }
.np-formband__inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.np-formband__title { font-size:clamp(36px,5vw,56px); font-weight:500; letter-spacing:-.025em; line-height:1.0; margin:0; color:var(--np-deep); }
.np-formband__title em { font-style:normal; }
.np-formband__sub { font-size:17px; color:rgba(14,52,59,.72); margin-top:16px; max-width:460px; line-height:1.5; }
.np-formband__actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

/* ============================================================ ABOUT / CONTENT */
.np-prose { max-width:720px; }
.np-prose p { font-size:19px; line-height:1.6; color:var(--fg-2); margin-bottom:24px; }
.np-prose p:last-child { margin-bottom:0; }
.np-principles { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.np-principle { padding:28px; border-radius:20px; background:var(--np-paper); border:1px solid var(--line-1); }
.np-principle__num { font-family:var(--font-mono); font-size:12px; color:var(--np-deep-500); }
.np-principle h4 { font-size:22px; font-weight:500; letter-spacing:-.015em; margin:12px 0 8px; }
.np-principle p { font-size:15px; line-height:1.55; color:var(--fg-2); }

/* ============================================================ CONTACT */
.np-contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.np-contact__methods { display:flex; flex-direction:column; gap:16px; }
.np-method { display:flex; gap:16px; align-items:flex-start; padding:24px; border-radius:20px; background:var(--np-paper); border:1px solid var(--line-1); }
.np-method svg { flex:none; width:24px; height:24px; color:var(--np-deep); margin-top:2px; }
.np-method h4 { font-size:17px; font-weight:600; margin:0 0 4px; }
.np-method p { font-size:14px; color:var(--fg-2); margin:0 0 10px; }
.np-form { display:flex; flex-direction:column; gap:16px; }
.np-field { display:flex; flex-direction:column; gap:8px; }
.np-field label { font-size:13px; font-weight:500; color:var(--fg-1); }
.np-input, .np-textarea {
  width:100%; border-radius:12px; border:1px solid var(--line-2); background:var(--np-white);
  padding:14px 16px; font-family:inherit; font-size:15px; color:var(--np-deep); outline:none;
  transition:border-color var(--t-base);
}
.np-textarea { min-height:140px; resize:vertical; border-radius:16px; }
.np-input:focus, .np-textarea:focus { border-color:var(--np-deep); }
.np-input::placeholder, .np-textarea::placeholder { color:rgba(14,52,59,.4); }

/* ============================================================ FOOTER */
.np-safety { background:var(--np-deep-900); color:rgba(244,241,234,.6); padding:28px 0; font-size:13px; line-height:1.6; }
.np-safety p { font-size:13px; color:inherit; max-width:980px; }
.np-footer { background:var(--np-deep); color:var(--np-bone); padding:96px 0 48px; }
.np-footer__cta { display:flex; align-items:end; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid rgba(244,241,234,.12); }
.np-footer__cta h2 { font-size:clamp(32px,4.5vw,52px); font-weight:500; letter-spacing:-.025em; color:var(--np-bone); max-width:560px; }
.np-footer__cta h2 em { font-style:normal; color:var(--np-volt); }
.np-footer__cols { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; margin-top:64px; }
.np-footer__col h6 { font-size:13px; font-weight:500; letter-spacing:.01em; color:rgba(244,241,234,.55); margin:0 0 16px; }
.np-footer__col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.np-footer__col a { color:var(--np-bone); font-size:14px; }
.np-footer__col p { font-size:14px; line-height:1.5; color:rgba(244,241,234,.7); max-width:280px; }
.np-footer__social { display:flex; gap:10px; margin-top:18px; }
.np-footer__social a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid rgba(244,241,234,.18); color:var(--np-bone); transition:background var(--t-base), border-color var(--t-base), color var(--t-base); }
.np-footer__social a:hover { background:var(--np-volt); border-color:transparent; color:var(--np-deep); opacity:1; }
.np-footer__social svg { width:20px; height:20px; }
.np-footer__mark { width:100%; margin-top:72px; }
.np-footer__mark img { width:100%; height:auto; display:block; opacity:.96; }
.np-footer__bottom { display:flex; justify-content:space-between; align-items:center; margin-top:48px; font-size:12px; color:rgba(244,241,234,.45); letter-spacing:.04em; flex-wrap:wrap; gap:12px; }

/* ============================================================ LANGUAGE SWITCH */
.np-lang { display:inline-flex; gap:2px; padding:3px; border-radius:999px; border:1px solid rgba(14,52,59,.14); background:rgba(14,52,59,.03); }
.np-lang__btn {
  height:28px; min-width:34px; padding:0 10px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:500; letter-spacing:.01em;
  background:transparent; color:var(--np-deep-500);
  transition:background var(--t-fast), color var(--t-fast);
}
.np-lang__btn:hover { color:var(--np-deep); }
.np-lang__btn.on { background:var(--np-deep); color:var(--np-bone); }
/* on the deep mobile drawer */
.np-lang--menu { align-self:flex-start; margin-bottom:24px; border-color:rgba(244,241,234,.18); background:rgba(244,241,234,.06); }
.np-lang--menu .np-lang__btn { color:rgba(244,241,234,.6); }
.np-lang--menu .np-lang__btn:hover { color:var(--np-bone); }
.np-lang--menu .np-lang__btn.on { background:var(--np-volt); color:var(--np-deep); }

/* ============================================================ HELPERS */
.np-center { text-align:center; }
.np-hide { display:none !important; }
.vialviz { display:block; }

/* ============================================================ RESPONSIVE */
@media (max-width:980px) {
  .np-section { padding:80px 0; }
  .np-products, .np-benefits, .np-science, .np-steps, .np-principles { grid-template-columns:repeat(2,1fr); }
  .np-value, .np-pdp__grid, .np-formband__inner, .np-contact { grid-template-columns:1fr; gap:40px; }
  .np-pdp__media { position:static; }
  .np-formband__actions { justify-content:flex-start; }
  .np-footer__cols { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:680px) {
  .np-nav__links, .np-nav__right { display:none; }
  .np-nav__toggle { display:flex; }
  .np-products, .np-benefits, .np-science, .np-steps, .np-principles, .np-specs { grid-template-columns:1fr; }
  .np-slider__nav { display:none; } /* swipe on mobile */
  .np-slider__track .np-tiktok__card { width:72vw; }
  .np-section__header { flex-direction:column; align-items:flex-start; gap:16px; }
  .np-footer__cols { grid-template-columns:1fr; }
  .np-footer__bottom { flex-direction:column; align-items:flex-start; }
  .np-hero { padding:148px 0 72px; }
  .np-pagehead, .np-pdp { padding-top:128px; }
}
