/* ==========================================================================
   TrackPulse — Design Tokens
   Cloned structural language from the "Kode Dot" reference:
   off-white/cream backgrounds, oversized bold black headlines,
   alternating dark/light feature sections, warm amber/gold accent,
   pill-shaped buttons, soft rounded card containers.
   ========================================================================== */
:root{
  --color-bg:        #ECE8E0;   /* warm off-white page background   */
  --color-card:      #E4E0D6;   /* slightly deeper card background  */
  --color-ink:       #17140F;   /* near-black text                  */
  --color-ink-soft:  #57534a;   /* secondary gray text              */
  --color-dark:      #131210;   /* dark section background          */
  --color-dark-card: #1f1c18;   /* dark section card background     */
  --color-accent:    #E9B531;   /* amber / gold — matches SOS button */
  --color-accent-ink:#1a1200;   /* text on accent buttons           */
  --radius-xl: 2.5rem;
  --radius-lg: 1.75rem;
  --radius-md: 1.1rem;
  --font-display: 'Inter', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-display);
  background: var(--color-bg);
  overflow-x: hidden;
}

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

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-buy{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.05);
  white-space: nowrap;
}
.btn-buy:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(233,181,49,0.45);
}
.nav-buy{ padding: 0.7rem 1.75rem; font-size: 0.95rem; }

/* ==========================================================================
   TOP NAV
   ========================================================================== */
.top-nav{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem clamp(1.25rem, 4vw, 3.5rem);
}
.logo{
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-section{
  position: relative;
  padding: 0 clamp(0.75rem, 2.5vw, 1.75rem) 1.75rem;
  padding-top: clamp(5rem, 10vw, 6.5rem);
}
.hero-card{
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius-xl);
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem clamp(1.5rem, 6vw, 6rem);
  gap: 2rem;
}
.hero-watermark{
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(6rem, 18vw, 15rem);
  font-weight: 900;
  color: rgba(23,20,15,0.035);
  letter-spacing: -0.03em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.hero-image-wrap{
  position: relative;
  flex: 1 1 45%;
  min-width: 260px;
  height: clamp(360px, 46vw, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.hero-img-ghost{
  position: absolute;
  width: 62%;
  opacity: 0.35;
  filter: blur(1px) grayscale(0.2);
  transform: translate(-38%, 6%) rotate(-14deg);
  z-index: 1;
}
.hero-img-main{
  position: relative;
  width: 78%;
  z-index: 2;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.18));
  transform-origin: 50% 65%;
}
.hero-copy{
  position: relative;
  z-index: 2;
  flex: 1 1 45%;
  min-width: 280px;
  text-align: right;
}
.hero-title{
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.92;
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}
.hero-title .line{ display:block; overflow: hidden; }
.hero-sub{
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--color-ink-soft);
  max-width: 30ch;
  margin-left: auto;
  margin-bottom: 1.75rem;
}
.hero-buy{ font-size: 1.05rem; padding: 1rem 2.25rem; }

@media (max-width: 860px){
  .hero-card{ flex-direction: column-reverse; text-align: center; padding-top: 6rem; }
  .hero-copy{ text-align: center; }
  .hero-sub{ margin-left: auto; margin-right: auto; }
  .hero-image-wrap{ width: 100%; }
}

/* ==========================================================================
   FEATURE SECTIONS — alternating light / dark, scroll-reveal content
   ========================================================================== */
.feature-section{
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem);
}
.feature-light{ background: var(--color-bg); color: var(--color-ink); }
.feature-dark{ background: var(--color-dark); color: #F2EFE8; }

.feature-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 5rem);
}
.feature-inner.reverse{ flex-direction: row-reverse; }

.feature-text{ flex: 1 1 46%; min-width: 280px; }
.feature-eyebrow{
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.feature-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  margin-bottom: 1.1rem;
}
.feature-body{
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  max-width: 42ch;
  opacity: 0.85;
}

.feature-media{
  flex: 1 1 40%;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-img{
  width: 100%;
  max-width: 340px;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.18));
}
.feature-dark .feature-img{ filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55)); }

@media (max-width: 860px){
  .feature-inner, .feature-inner.reverse{ flex-direction: column; text-align: center; }
  .feature-body{ margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   SPEC / BENTO GRID SECTION
   ========================================================================== */
.spec-section{
  background: var(--color-bg);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 6vw, 6rem) 6rem;
  text-align: center;
}
.spec-title{
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.bento-grid{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.bento-card{
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  text-align: left;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.bento-card h3{
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.bento-card p{
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  line-height: 1.45;
}
@media (max-width: 980px){
  .bento-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .bento-grid{ grid-template-columns: 1fr; }
}
.spec-showcase{ margin-top: clamp(3rem, 7vw, 5rem); display:flex; justify-content:center; }
.spec-img{ width: 100%; max-width: 260px; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.18)); }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{
  background: var(--color-dark);
  color: #F2EFE8;
  padding: clamp(5rem, 12vw, 9rem) 1.5rem;
  text-align: center;
}
.final-title{
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  margin-bottom: 0.75rem;
}
.final-sub{ color: #a8a196; font-size: 1.1rem; margin-bottom: 2rem; }
.price-row{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
}
.price-now{ font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; color: var(--color-accent); }
.price-was{ font-size: 1.25rem; color: #6b655c; text-decoration: line-through; }
.final-buy{ font-size: 1.1rem; padding: 1rem 2.5rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background: var(--color-dark);
  color: #6b655c;
  padding: 2rem 1.5rem 7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
}
.footer-logo{ font-weight: 800; color: #F2EFE8; }

/* ==========================================================================
   STICKY BOTTOM ACTION BAR
   ========================================================================== */
.sticky-bar{
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  /* initial transform is set by GSAP (xPercent/yPercent) on load, see js/script.js */
  opacity: 0;
  z-index: 50;
  background: var(--color-bg);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  padding: 0.7rem 0.7rem 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: calc(100vw - 2rem);
}
.sticky-text{
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}
.sticky-mrp{ color: var(--color-ink-soft); font-weight: 400; }
.sticky-buy{ padding: 0.65rem 1.6rem; font-size: 0.9rem; flex-shrink: 0; }

@media (max-width: 640px){
  .sticky-bar{ padding-left: 1rem; gap: 0.75rem; }
  .sticky-text{ font-size: 0.78rem; white-space: normal; max-width: 190px; }
}

/* ==========================================================================
   UTILITY
   ========================================================================== */
.hide-sm{ display:inline; }
@media (max-width:640px){ .hide-sm{ display:none; } }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ==========================================================================
   NAV — links, cart icon + badge
   ========================================================================== */
.logo{ text-decoration:none; }
.nav-links{
  display:flex;
  gap: 2rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links a{
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  opacity: 0.7;
  transition: opacity .2s ease;
}
.nav-links a:hover, .nav-links a.active{ opacity: 1; }
.nav-actions{ display:flex; align-items:center; gap: 1.1rem; }
.cart-link{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: rgba(23,20,15,0.06);
  color: var(--color-ink);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.cart-link:hover{ background: rgba(23,20,15,0.12); transform: translateY(-1px); }
.cart-link svg{ width: 1.25rem; height: 1.25rem; }
.cart-count{
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (max-width: 860px){
  .nav-links{ display:none; }
}

/* ==========================================================================
   ICON MARQUEE
   ========================================================================== */
.marquee-section{
  position: relative;
  background: var(--color-bg);
  padding: 4rem 0 5rem;
  overflow: hidden;
}
.marquee-rows{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.marquee-row{
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee-left 32s linear infinite;
}
.marquee-row-reverse{ animation-name: marquee-right; animation-duration: 36s; }
@keyframes marquee-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes marquee-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }

.marquee-badge{
  flex-shrink: 0;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1.1rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-badge svg{ width: 1.9rem; height: 1.9rem; }

.marquee-device{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 24vw, 320px);
  z-index: 3;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.25));
}
.marquee-device::before{
  content: "";
  position: absolute;
  inset: -30% -60%;
  background: radial-gradient(closest-side, var(--color-bg) 55%, transparent 100%);
  z-index: -1;
}

/* ==========================================================================
   ARC TEXT SECTION
   ========================================================================== */
.arc-section{
  position: relative;
  background: var(--color-bg);
  padding: 2rem 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
}
.arc-bg{ width: 100%; max-width: 1000px; margin: 0 auto; display:block; height: auto; }
.arc-text{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  fill: var(--color-ink);
  letter-spacing: -0.02em;
}
.arc-stage{
  position: relative;
  max-width: 420px;
  margin: -6rem auto 0;
}
.arc-device{ width: 62%; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.18)); position:relative; z-index:2; }
.arc-pill{
  position: absolute;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.pill-left-top{ top: 8%; left: -6%; }
.pill-right-top{ top: 2%; right: -8%; }
.pill-bottom{ bottom: 6%; right: -4%; }
@media (max-width: 640px){
  .arc-text{ font-size: 1.5rem; }
  .arc-stage{ margin-top: -3rem; }
  .pill-left-top{ left: 0; }
  .pill-right-top{ right: 0; }
  .pill-bottom{ right: 0; }
}

/* ==========================================================================
   PERSONA TABS
   ========================================================================== */
.tabs-section{
  background: var(--color-bg);
  padding: 2rem clamp(1.25rem, 6vw, 4rem) 6rem;
}
.tabs-nav{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 0.6rem;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}
.tab-btn{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 1rem 1rem 0 0;
  background: var(--color-card);
  color: var(--color-ink-soft);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .2s ease, background .2s ease;
}
.tab-btn.active{ background: var(--color-card); color: var(--color-ink); opacity: 1; }
.tabs-panel{
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--color-card);
  border-radius: 0 1.75rem 1.75rem 1.75rem;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  min-height: 380px;
}
.tab-content{ max-width: 34ch; position: relative; z-index: 2; }
.tab-content h3{
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.tab-content p{ color: var(--color-ink-soft); font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.5rem; }
.tab-explore{ padding: 0.75rem 1.75rem; font-size: 0.95rem; }
.tab-media{ position: relative; z-index: 2; flex-shrink: 0; width: min(280px, 34vw); }
.tab-media img{ filter: drop-shadow(0 30px 40px rgba(0,0,0,0.18)); }
@media (max-width: 780px){
  .tabs-panel{ flex-direction: column; text-align:center; }
  .tab-content{ max-width: 100%; }
  .tab-media{ width: 55%; }
}

/* decorative shield / spark / chip icons, scattered + blurred like the reference */
.deco{ position: absolute; opacity: 0.16; color: var(--color-ink); pointer-events: none; z-index: 1; }
.deco-shield{ width: 5rem; height: 5rem; }
.deco-spark{ width: 3rem; height: 3rem; color: var(--color-accent); opacity: 0.5; }
.deco-chip{ width: 4.5rem; height: 4.5rem; }
.deco-1{ top: 6%; left: 4%; transform: rotate(-12deg); filter: blur(0.5px); }
.deco-2{ top: 12%; left: 38%; transform: rotate(18deg); }
.deco-3{ bottom: 10%; left: 8%; transform: rotate(8deg); filter: blur(0.5px); }
.deco-4{ top: 20%; right: 30%; transform: rotate(-24deg); }
.deco-5{ bottom: 14%; right: 6%; transform: rotate(-10deg); filter: blur(0.5px); }

/* ==========================================================================
   AI / APP CONTROL CARD
   ========================================================================== */
.ai-card-section{ background: var(--color-bg); padding: 0 clamp(1.25rem, 6vw, 4rem) 6rem; }
.ai-card{
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.ai-card-pattern{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  padding: 2rem;
  opacity: 0.06;
  color: #fff;
  z-index: 0;
}
.ai-card-pattern svg{ width: 2.5rem; height: 2.5rem; }
.ai-card-text{ position: relative; z-index: 2; max-width: 30ch; color: #F2EFE8; }
.ai-card-text h2{ font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.ai-card-text p{ color: #a8a196; font-size: 1.05rem; line-height: 1.55; }
.ai-card-media{ position: relative; z-index: 2; flex-shrink: 0; width: min(260px, 32vw); }
.ai-card-img{ width: 70%; margin: 0 auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5)); position: relative; z-index: 2; }
.wire-svg-wrap{ position: absolute; top: -30px; left: -20px; width: 140%; z-index: 1; }
.chat-bubble{
  position: absolute;
  background: #2a2620;
  color: #F2EFE8;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 0.8rem;
  white-space: nowrap;
  z-index: 3;
}
.bubble-1{ top: 8%; left: -6%; }
.bubble-2{ bottom: 18%; right: -14%; }
@media (max-width: 780px){
  .ai-card{ flex-direction: column; text-align: center; }
  .ai-card-text{ max-width: 100%; }
  .ai-card-media{ width: 60%; margin-top: 2rem; }
}

/* ==========================================================================
   FOOTER LINKS
   ========================================================================== */
.footer-links{ display:flex; gap: 1.5rem; }
.footer-links a{ color: #a8a196; text-decoration:none; font-size: 0.85rem; }
.footer-links a:hover{ color: #F2EFE8; }

/* ==========================================================================
   INNER PAGES — shared page-header banner (shop / cart / checkout / contact)
   ========================================================================== */
.page-hero{
  position: relative;
  padding: clamp(7rem, 12vw, 9rem) clamp(1.25rem, 6vw, 4rem) clamp(3rem, 6vw, 4rem);
  background: var(--color-card);
  text-align: center;
  overflow: hidden;
}
.page-hero h1{
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-bottom: 0.75rem;
}
.page-hero p{ color: var(--color-ink-soft); font-size: 1.1rem; max-width: 46ch; margin: 0 auto; }
.page-hero .deco{ opacity: 0.14; }

.page-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 6vw, 2rem) 6rem;
}

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */
.shop-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: flex-start;
}
.shop-gallery{
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  position: relative;
}
.shop-gallery-main{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.shop-gallery-main img{ max-width: 78%; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.18)); transition: opacity .25s ease; }
.shop-thumbs{ display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: center; }
.shop-thumb{
  width: 4rem; height: 4rem;
  border-radius: 0.75rem;
  background: var(--color-bg);
  border: 2px solid transparent;
  padding: 0.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.shop-thumb.active{ border-color: var(--color-accent); }
.shop-thumb img{ width: 100%; }

.shop-info .badge-row{ display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.shop-badge{
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(233,181,49,0.15); color: #8a6a13;
  font-size: 0.78rem; font-weight: 700;
  padding: 0.35rem 0.7rem; border-radius: 999px;
}
.shop-badge svg{ width: 0.9rem; height: 0.9rem; }
.shop-info h1{ font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.shop-tagline{ color: var(--color-ink-soft); font-size: 1.05rem; margin-bottom: 1.25rem; }
.shop-price-row{ display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.5rem; }
.shop-price-now{ font-size: 2.1rem; font-weight: 800; }
.shop-price-was{ color: var(--color-ink-soft); text-decoration: line-through; font-size: 1.15rem; }
.shop-price-save{ background: #dff2e1; color: #1e7a34; font-weight: 700; font-size: 0.8rem; padding: 0.3rem 0.6rem; border-radius: 999px; }

.shop-features{ list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.65rem; }
.shop-features li{ display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--color-ink); }
.shop-features svg{ width: 1.1rem; height: 1.1rem; color: var(--color-accent); flex-shrink: 0; }

.qty-row{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.qty-control{ display: flex; align-items: center; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; overflow: hidden; }
.qty-control button{ width: 2.6rem; height: 2.6rem; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--color-ink); }
.qty-control button:hover{ background: rgba(0,0,0,0.05); }
.qty-control span{ width: 2.5rem; text-align: center; font-weight: 700; }

.shop-actions{ display: flex; gap: 0.85rem; flex-wrap: wrap; }
.btn-outline{
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-ink); color: var(--color-ink);
  font-weight: 700; padding: 0.85rem 1.85rem; border-radius: 999px;
  text-decoration: none; background: transparent; cursor: pointer; font-size: 1rem;
  transition: background .2s ease, color .2s ease;
}
.btn-outline:hover{ background: var(--color-ink); color: var(--color-bg); }
.stock-note{ margin-top: 1rem; font-size: 0.85rem; color: var(--color-ink-soft); display:flex; align-items:center; gap:0.4rem; }
.stock-note svg{ width: 1rem; height: 1rem; color: #1e7a34; }

.toast{
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 160%);
  background: var(--color-ink);
  color: #F2EFE8;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 100;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
  white-space: nowrap;
}
.toast.show{ transform: translate(-50%, 0); }

@media (max-width: 860px){
  .shop-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   CART PAGE
   ========================================================================== */
.cart-layout{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: flex-start; }
.cart-items{ display: flex; flex-direction: column; gap: 1rem; }
.cart-item{
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto;
  align-items: center;
  gap: 1.25rem;
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
}
.cart-item img{ width: 100%; border-radius: 0.6rem; }
.cart-item-name{ font-weight: 700; margin-bottom: 0.2rem; }
.cart-item-price{ color: var(--color-ink-soft); font-size: 0.9rem; }
.cart-item-remove{ background:none; border:none; color: var(--color-ink-soft); cursor:pointer; font-size:0.85rem; text-decoration:underline; padding:0; margin-top:0.35rem; }
.cart-item-remove:hover{ color: #b3261e; }
.cart-item-total{ font-weight: 800; white-space: nowrap; }

.cart-summary{
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  position: sticky;
  top: 2rem;
}
.cart-summary h3{ font-weight: 800; font-size: 1.2rem; margin-bottom: 1.25rem; }
.summary-row{ display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--color-ink-soft); }
.summary-row.total{ color: var(--color-ink); font-weight: 800; font-size: 1.1rem; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 0.9rem; margin-top: 0.5rem; }
.summary-row .savings{ color: #1e7a34; }
.cart-checkout-btn{ width: 100%; margin-top: 1rem; text-align: center; }

.empty-state{
  text-align: center;
  padding: 5rem 1.5rem;
  position: relative;
}
.empty-state .deco{ position: static; display: inline-block; opacity: 0.3; width: 4rem; height: 4rem; margin-bottom: 1rem; }
.empty-state h3{ font-weight: 800; font-size: 1.5rem; margin-bottom: 0.5rem; }
.empty-state p{ color: var(--color-ink-soft); margin-bottom: 1.5rem; }

@media (max-width: 780px){
  .cart-layout{ grid-template-columns: 1fr; }
  .cart-item{ grid-template-columns: 4rem 1fr; grid-template-rows: auto auto; }
  .cart-item-qty{ grid-column: 1 / -1; }
  .cart-item-total{ grid-column: 1 / -1; text-align: right; }
}

/* ==========================================================================
   CHECKOUT / BUY NOW PAGE
   ========================================================================== */
.checkout-layout{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: flex-start; }
.checkout-form{ background: var(--color-card); border-radius: var(--radius-md); padding: 2rem; }
.checkout-form h3{ font-weight: 800; font-size: 1.15rem; margin-bottom: 1.25rem; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-field{ margin-bottom: 1rem; }
.form-field label{ display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-ink-soft); }
.form-field input, .form-field textarea, .form-field select{
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 0.7rem;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: var(--color-bg);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline: none; border-color: var(--color-accent);
}
.payment-options{ display: grid; gap: 0.75rem; margin: 1.25rem 0 1.75rem; }
.payment-option{
  display: flex; align-items: center; gap: 0.75rem;
  border: 1.5px solid rgba(0,0,0,0.12); border-radius: 0.8rem;
  padding: 0.9rem 1.1rem; cursor: pointer; font-weight: 600; font-size: 0.95rem;
}
.payment-option input{ accent-color: var(--color-accent); width: 1.1rem; height: 1.1rem; }
.payment-option.selected{ border-color: var(--color-accent); background: rgba(233,181,49,0.08); }

.checkout-summary{ background: var(--color-card); border-radius: var(--radius-md); padding: 1.75rem; position: sticky; top: 2rem; }
.checkout-mini-item{ display: flex; gap: 0.85rem; align-items: center; margin-bottom: 1rem; }
.checkout-mini-item img{ width: 3.2rem; border-radius: 0.5rem; }
.checkout-mini-item .name{ font-weight: 700; font-size: 0.9rem; }
.checkout-mini-item .meta{ font-size: 0.82rem; color: var(--color-ink-soft); }

.place-order-btn{ width: 100%; text-align: center; margin-top: 1rem; border: none; cursor: pointer; }

.order-success{ text-align: center; padding: 4rem 1.5rem; }
.order-success .check-badge{
  width: 5rem; height: 5rem; border-radius: 999px; background: #dff2e1; color: #1e7a34;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;
}
.order-success .check-badge svg{ width: 2.4rem; height: 2.4rem; }
.order-success h2{ font-weight: 800; font-size: 2rem; margin-bottom: 0.6rem; }
.order-success p{ color: var(--color-ink-soft); margin-bottom: 0.4rem; }
.order-success .order-id{ font-weight: 700; color: var(--color-ink); }

@media (max-width: 860px){
  .checkout-layout{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-layout{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: flex-start; }
.contact-info{ display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-card{ background: var(--color-card); border-radius: var(--radius-md); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-card svg{ width: 1.5rem; height: 1.5rem; color: var(--color-accent); flex-shrink: 0; margin-top: 0.15rem; }
.contact-info-card h4{ font-weight: 700; margin-bottom: 0.25rem; }
.contact-info-card p{ color: var(--color-ink-soft); font-size: 0.92rem; line-height: 1.5; }
.contact-form{ background: var(--color-card); border-radius: var(--radius-md); padding: 2rem; position: relative; overflow: hidden; }
.contact-success{ text-align: center; padding: 3rem 1rem; }

@media (max-width: 860px){
  .contact-layout{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   FEATURE WHEEL — rotating ring of feature icons (replaces static device
   image in the "All-in-One Integration" section), with a continuous CSS
   spin plus an extra scroll-driven rotation layered on via GSAP.
   ========================================================================== */
.feature-wheel{
  position: relative;
  width: min(280px, 68vw);
  height: min(280px, 68vw);
  margin: 0 auto;
}
.wheel-ring{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px dashed rgba(23,20,15,0.16);
  animation: wheel-spin 26s linear infinite;
}
.wheel-ring-inner{
  inset: 18%;
  border-style: solid;
  border-color: rgba(233,181,49,0.35);
  animation-duration: 20s;
  animation-direction: reverse;
}
@keyframes wheel-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.wheel-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38%; height: 38%;
  border-radius: 999px;
  background: var(--color-ink);
  color: #F2EFE8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  padding: 0.5rem;
  z-index: 2;
}

.wheel-item{
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: rotate(var(--angle)) translate(min(38vw, 150px)) rotate(calc(-1 * var(--angle)));
  z-index: 3;
}
.wheel-item-inner{
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 1.1rem;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
.wheel-item-inner svg{ width: 1.5rem; height: 1.5rem; }
.wheel-item-inner span{ font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }

/* ==========================================================================
   NETWORK MEDIA — satellite + pulsing GSM signal (Offline Reliability)
   ========================================================================== */
.network-media{ position: relative; }
.deco-satellite{
  position: absolute;
  top: -6%;
  right: 6%;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-ink-soft);
  opacity: 0.55;
  animation: satellite-drift 5s ease-in-out infinite;
}
@keyframes satellite-drift{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(-4px, 6px) rotate(-8deg); }
}
.signal-pulse-wrap{
  position: absolute;
  bottom: 6%;
  left: 2%;
  width: 3rem;
  height: 3rem;
  z-index: 1;
}
.signal-tower-icon{
  position: absolute;
  inset: 0.6rem;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--color-accent);
}
.pulse-ring{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: pulse-ring 3s ease-out infinite;
}
.pulse-delay-1{ animation-delay: 1s; }
.pulse-delay-2{ animation-delay: 2s; }
@keyframes pulse-ring{
  0%{ transform: scale(0.6); opacity: 0.7; }
  100%{ transform: scale(2.6); opacity: 0; }
}

/* ==========================================================================
   SHOCK SPARKS — flickering spark accents (Non-Lethal Defense)
   ========================================================================== */
.shock-media{ position: relative; }
.shock-spark{
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--color-accent);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(233,181,49,0.7));
  animation: spark-flicker 1.8s ease-in-out infinite;
}
.spark-a{ bottom: 12%; left: 6%; animation-delay: 0s; }
.spark-b{ bottom: 4%; left: 22%; width: 1rem; height: 1rem; animation-delay: 0.5s; }
.spark-c{ bottom: 18%; left: -4%; width: 0.85rem; height: 0.85rem; animation-delay: 1s; }
@keyframes spark-flicker{
  0%, 100%{ opacity: 0; transform: scale(0.5) rotate(0deg); }
  10%{ opacity: 1; transform: scale(1.15) rotate(-6deg); }
  22%{ opacity: 0.2; transform: scale(0.75) rotate(4deg); }
  40%{ opacity: 1; transform: scale(1) rotate(0deg); }
  60%{ opacity: 0; transform: scale(0.6) rotate(0deg); }
}

/* ==========================================================================
   ARC STAGE tweaks — smaller device, shifted up, extra pill
   ========================================================================== */
.arc-stage-shift{ margin-top: -8.5rem; }
.arc-device-sm{ width: 52%; }
.pill-left-bottom{ bottom: 4%; left: -10%; }
@media (max-width: 640px){
  .arc-stage-shift{ margin-top: -4.5rem; }
  .pill-left-bottom{ left: 0; bottom: -6%; }
}

/* ==========================================================================
   TAB ILLUSTRATIONS — vector personas swapped per active tab
   ========================================================================== */
.tab-illustration{ width: 100%; height: auto; color: var(--color-ink); display: none; }
.tab-illustration.active-illustration{ display: block; }

/* ==========================================================================
   BENTO CARD ICONS
   ========================================================================== */
.bento-icon{
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.bento-icon svg{ width: 1.4rem; height: 1.4rem; }

/* ==========================================================================
   ACCOUNT WIDGET — login/signup entry point + signed-in avatar menu
   ========================================================================== */
.account-widget{ position: relative; display: flex; align-items: center; }
.account-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: rgba(23,20,15,0.06);
  color: var(--color-ink);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.account-btn:hover{ background: rgba(23,20,15,0.12); transform: translateY(-1px); }
.account-btn svg{ width: 1.2rem; height: 1.2rem; }
.account-avatar-btn{ background: var(--color-accent); padding: 0; }
.account-avatar{
  width: 100%; height: 100%;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--color-accent-ink);
}
.account-menu{ position: relative; }
.account-dropdown{
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  background: var(--color-bg);
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  padding: 1rem;
  min-width: 12rem;
  z-index: 60;
}
.account-dropdown-name{ font-weight: 700; font-size: 0.92rem; }
.account-dropdown-email{ font-size: 0.78rem; color: var(--color-ink-soft); margin-bottom: 0.75rem; }
.account-dropdown-link{
  display: block;
  font-size: 0.88rem;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.account-logout{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 0.5rem 0 0.1rem;
  font-size: 0.88rem;
  color: #b3261e;
  cursor: pointer;
  font-family: var(--font-display);
}

/* ==========================================================================
   AUTH PAGES — login / signup
   ========================================================================== */
.auth-wrap{
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.25rem 6rem;
}
.auth-card{ background: var(--color-card); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 2.75rem); }
.auth-card h1{ font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; text-align: center; }
.auth-card .auth-sub{ color: var(--color-ink-soft); text-align: center; margin-bottom: 1.75rem; font-size: 0.95rem; }
.auth-submit{ width: 100%; justify-content: center; margin-top: 0.5rem; border: none; cursor: pointer; }
.auth-switch{ text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--color-ink-soft); }
.auth-switch a{ color: var(--color-ink); font-weight: 700; text-decoration: none; }
.auth-switch a:hover{ text-decoration: underline; }
.auth-error{ background: #fde8e6; color: #b3261e; font-size: 0.85rem; padding: 0.65rem 0.9rem; border-radius: 0.6rem; margin-bottom: 1rem; display: none; }
.auth-error.show{ display: block; }
.auth-success{ text-align: center; padding: 2rem 0; }