@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Native cross-page crossfade in supporting browsers; ignored elsewhere (progressive enhancement) */
@view-transition{
  navigation:auto;
}

:root{
  --bg:#FAFAF8; --fg:#2B2B28; --muted:#8A857C; --line:#E3DFD6;
  --accent:#7C8B7A; --accent-dark:#677866; --panel:#F1EEE7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter', Helvetica, Arial, sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1100px; margin:0 auto; padding:32px 24px 80px;}

/* Header / nav — glass surface that condenses once the page scrolls */
header{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid transparent; padding-bottom:16px; margin-bottom:32px;
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,248,.7);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:padding .3s cubic-bezier(.4,0,.2,1), border-color .3s ease, box-shadow .3s ease;
}
header.is-scrolled{padding-top:10px; padding-bottom:10px; border-color:var(--line); box-shadow:0 12px 30px rgba(0,0,0,.06);}
header .logo-link{display:flex; align-items:center; text-decoration:none;}
header .logo-link svg{height:48px; width:auto; display:block; transition:transform .35s cubic-bezier(.4,0,.2,1);}
header.is-scrolled .logo-link svg{transform:scale(.8); transform-origin:left center;}
header .logo-link .logo-mark{transform-box:fill-box; transform-origin:center; transition:transform .5s cubic-bezier(.4,0,.2,1);}
header .logo-link:hover .logo-mark{transform:rotate(45deg);}
header .logo-link .logo-text{transition:letter-spacing .35s ease;}
header .logo-link:hover .logo-text{letter-spacing:12px;}
header .logo-link .logo-sub{transition:opacity .35s ease, letter-spacing .35s ease;}
header .logo-link:hover .logo-sub{opacity:.55; letter-spacing:6px;}
nav{display:flex; align-items:center; gap:28px;}
.nav-reserve{margin-left:4px;}
@media(max-width:640px){.nav-reserve{display:none;}}
nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  padding-bottom:3px;
  transition:color .22s ease, letter-spacing .22s ease;
}
nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1.5px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
nav a:hover{
  color:var(--fg);
  letter-spacing:.11em;
}
nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* Section scroll-reveal (gated behind .js so content stays visible without JavaScript) */
.js .section{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.js .section.in-view{opacity:1; transform:translateY(0);}

/* Staggered card reveal — product grid cascades in rather than popping as one block.
   transition-delay values are positional (opacity, transform, box-shadow) so only
   the initial fade-in is staggered — hover response stays instant on every card. */
.js .product-grid .product-card{opacity:0; transform:translateY(20px); transition:opacity .45s ease, transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;}
.js .section.in-view .product-grid .product-card{opacity:1; transform:translateY(0);}
.js .product-grid .product-card:nth-child(1){transition-delay:.02s, 0s, 0s;}
.js .product-grid .product-card:nth-child(2){transition-delay:.08s, 0s, 0s;}
.js .product-grid .product-card:nth-child(3){transition-delay:.14s, 0s, 0s;}
.js .product-grid .product-card:nth-child(4){transition-delay:.2s, 0s, 0s;}
.js .product-grid .product-card:nth-child(5){transition-delay:.26s, 0s, 0s;}
.js .product-grid .product-card:nth-child(6){transition-delay:.32s, 0s, 0s;}
.js .product-grid .product-card:nth-child(n+7){transition-delay:.38s, 0s, 0s;}

/* Pill CTA buttons */
.btn{
  display:inline-block; position:relative; overflow:hidden;
  padding:14px 30px; border-radius:999px; font-size:14px; font-weight:600;
  font-family:inherit; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; border:none; text-align:center;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease, letter-spacing .25s ease;
}
/* Shimmer sweep */
.btn::before{
  content:'';
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::before{ left:160%; }

/* Ripple on click */
.btn .ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0); animation:btn-ripple .55s linear;
  pointer-events:none;
}
@keyframes btn-ripple{
  to{ transform:scale(4); opacity:0; }
}

.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(124,139,122,.38); background:var(--accent-dark); letter-spacing:.07em; }

.btn-secondary{ background:transparent; color:var(--fg); border:1.5px solid var(--line); }
.btn-secondary::before{ background:linear-gradient(120deg, transparent 0%, rgba(124,139,122,.14) 50%, transparent 100%); }
.btn-secondary:hover{ transform:translateY(-3px); border-color:var(--accent); color:var(--accent); letter-spacing:.07em; }

.btn-sm{ padding:9px 18px; font-size:11px; }

/* Product-card conversion badges + CTA row */
.badge-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0;}
.badge-row .logo-badge{margin-top:0;}
.badge{display:inline-block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:999px;}
.badge-early{background:rgba(124,139,122,.14); color:var(--accent-dark); border:1px solid rgba(124,139,122,.3);}
.badge-ship{background:var(--bg); color:var(--muted); border:1px solid var(--line);}
.card-cta-row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.card-cta-row .btn{flex:1 1 auto; min-width:fit-content;}

/* .mend-sticky-cta rules moved to main.js (self-injected <style>) — several
   pages that use this CTA (Pulse/Oxi/App) don't load this stylesheet at all,
   the same reason the modal system injects its own self-contained styles. */

footer{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; line-height:1.8;}
footer a{position:relative; padding-bottom:2px;}
footer a::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .25s cubic-bezier(.4,0,.2,1);}
footer a:hover::after{transform:scaleX(1); transform-origin:left;}

/* ── GLOBAL INTERACTIVE POLISH ── */
/* Product cards */
.product-card{position:relative; background:var(--panel); border-radius:14px; overflow:hidden; text-align:left; text-decoration:none; color:var(--fg); transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; display:block;}
.product-card:hover{transform:translateY(-8px); box-shadow:0 20px 44px rgba(0,0,0,.12);}
.product-card .img-box img{transition:transform .6s cubic-bezier(.4,0,.2,1);}
.product-card:hover .img-box img{transform:scale(1.08);}
/* Cursor-tracked spotlight glow — position set via --mx/--my custom properties from main.js */
.product-card::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4), transparent 60%);
  opacity:0; transition:opacity .35s ease; mix-blend-mode:overlay;
}
.product-card:hover::after{opacity:1;}
/* Feature images */
.products-feature img{transition:transform .7s cubic-bezier(.4,0,.2,1);}
.products-feature:hover img{transform:scale(1.04);}
/* Spec cards */
.spec-card{transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease;}
/* Link underline animation for footer links etc */
a[href]:not(.btn):not(.product-card):not(.logo-link){transition:color .2s ease;}
a[href]:not(.btn):not(.product-card):not(.logo-link):hover{color:var(--accent);}

/* ── CUSTOM LOGO BADGE (product cards) ── */
.product-card .logo-badge{display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-dark); background:rgba(124,139,122,.1); border:1px solid rgba(124,139,122,.28); padding:3px 9px; border-radius:999px; font-weight:600;}
.product-card .logo-badge svg{flex-shrink:0;}

/* ── BRAND-IT SECTION ── */
.brand-it-inner{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:24px;}
@media(max-width:860px){.brand-it-inner{grid-template-columns:1fr;}}
.brand-it-copy .brand-it-lede{font-size:17px; font-weight:600; margin-bottom:12px; color:var(--fg);}
.brand-it-copy p{font-size:15px; color:var(--fg); line-height:1.7; margin-bottom:12px;}
.brand-it-list{list-style:none; margin-top:16px;}
.brand-it-list li{padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; display:flex; gap:12px; align-items:flex-start;}
.brand-it-list li::before{content:'—'; color:var(--accent); flex-shrink:0; font-weight:600;}
.brand-it-preview{background:var(--panel); border-radius:14px; padding:24px; border:1px solid var(--line);}
.brand-it-upload-label{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; margin-bottom:12px; display:block;}
.brand-it-drop{position:relative; border:2px dashed var(--line); border-radius:10px; overflow:hidden; transition:border-color .2s ease; cursor:pointer;}
.brand-it-drop:hover{border-color:var(--accent);}
.brand-it-drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2;}
.brand-it-placeholder{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:32px 16px; text-align:center; color:var(--muted); font-size:13px; pointer-events:none;}
.brand-it-placeholder .sub{font-size:11px; opacity:.7;}
.brand-it-canvas{display:none; width:100%; border-radius:8px;}
.brand-it-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.brand-it-cta{margin-top:28px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.brand-it-cta .btn-primary{background:var(--accent); color:#fff;}
.brand-it-cta .btn-primary:hover{background:var(--accent-dark);}
.brand-it-hint{font-size:12px; color:var(--muted);}
.brand-it-drop.drag-over{border-color:var(--accent); background:rgba(124,139,122,.05);}
footer p{margin-bottom:6px;}
footer p:last-child{margin-bottom:0;}

/* Generic tooltips */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  width:200px; padding:8px 10px; border-radius:8px;
  background:var(--fg); color:var(--bg); font-size:12px; font-weight:400; line-height:1.4; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:30;
}
[data-tooltip]::before{
  content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--fg);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;
}
[data-tooltip]:hover::after, [data-tooltip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }
[data-tooltip]:hover::before{ transform:translateX(-50%); }

/* ── Accessibility: respect reduced-motion ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .section{opacity:1 !important; transform:none !important;}
  .carousel-slide .slide-img img{animation:none !important;}
}