/* Stock Control product landing — extends the shared Arbet design system. */
.stock-page {
  --sc-teal: #0d879a;
  --sc-teal-dark: #086d7e;
  --sc-teal-light: #e5f5f7;
  --sc-ink: #071a31;
  background: #fff;
}

.sc-section { padding: clamp(5rem, 8vw, 8rem) 0; }

.sc-section-heading {
  max-width: 760px;
  margin-bottom: clamp(2.75rem, 5vw, 4.75rem);
}

.sc-section-heading h2,
.sc-section-heading p:last-child { margin-bottom: 0; }
.sc-section-heading > p:last-child { max-width: 62ch; color: var(--text-muted); font-size: 1.06rem; }
.sc-section-heading-light h2 { color: #fff; }
.sc-section-heading-light > p:last-child { color: #b9c8d9; }

/* Product header */
.sc-brand-group { display: flex; align-items: center; min-width: 0; }
.sc-product-name {
  margin-left: 1.15rem;
  padding-left: 1.15rem;
  color: var(--navy);
  border-left: 1px solid var(--border-strong);
  font-size: .93rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.sc-product-name:hover { color: var(--blue); }
.sc-menu { gap: clamp(.7rem, 1.1vw, 1.15rem); }
.sc-menu .sc-nav-app { color: var(--sc-teal); }

/* Hero */
.sc-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  align-items: center;
  padding: clamp(4.75rem, 7vw, 7rem) 0 clamp(5.5rem, 8vw, 8.5rem);
  background-color: #f3f7fb;
  overflow: hidden;
}

.sc-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 48%;
  background-image: linear-gradient(rgba(13, 135, 154, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 135, 154, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, transparent, #000 30%);
  pointer-events: none;
}

.sc-hero::after {
  content: "";
  position: absolute;
  top: -18rem;
  right: -15rem;
  width: 52rem;
  height: 52rem;
  background: radial-gradient(circle, rgba(13, 135, 154, .12), transparent 67%);
  pointer-events: none;
}

.sc-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(460px, .95fr) minmax(500px, 1.05fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6.5rem);
}

.sc-hero-copy { max-width: 690px; }
.sc-hero h1 {
  max-width: 14ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2.8rem, 4.8vw, 4.7rem);
  line-height: 1.01;
}

.sc-hero-lead {
  max-width: 61ch;
  margin-bottom: 2rem;
  color: var(--text-muted);
  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.7;
}

.sc-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sc-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 2rem 0 0;
  padding: 0;
  color: #41536a;
  list-style: none;
  font-size: .83rem;
  font-weight: 700;
}

.sc-hero-points li { display: flex; align-items: center; gap: .55rem; }
.sc-hero-points li::before { content: ""; width: .42rem; height: .42rem; flex: 0 0 auto; background: var(--sc-teal); border-radius: 50%; }

.sc-hero-product { position: relative; min-width: 0; }
.sc-product-glow {
  position: absolute;
  inset: 12% -4% -10% 18%;
  background: rgba(20, 103, 210, .13);
  filter: blur(50px);
  border-radius: 50%;
}

.sc-browser {
  position: relative;
  display: block;
  min-width: 0;
  background: #fff;
  border: 1px solid #c9d5e3;
  border-radius: .8rem;
  box-shadow: 0 28px 70px rgba(7, 26, 49, .15);
  overflow: hidden;
}

.sc-browser-hero { transform: perspective(1400px) rotateY(-2.5deg) rotateX(1deg); transform-origin: center; }
.sc-browser-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: .36rem;
  padding: 0 .8rem;
  color: #708096;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: .65rem;
  font-weight: 600;
}

.sc-browser-bar > span,
.sc-browser-bar > i { width: .48rem; height: .48rem; flex: 0 0 auto; background: #c8d2de; border-radius: 50%; }
.sc-browser-bar > span:nth-child(1),
.sc-browser-bar > i:nth-child(1) { background: #f28b82; }
.sc-browser-bar > span:nth-child(2),
.sc-browser-bar > i:nth-child(2) { background: #f6c75b; }
.sc-browser-bar > span:nth-child(3),
.sc-browser-bar > i:nth-child(3) { background: #68c790; }
.sc-browser-bar small { margin-left: .5rem; font: inherit; white-space: nowrap; }
.sc-browser img { width: 100%; height: auto; display: block; }

.sc-live-label {
  position: absolute;
  right: -1rem;
  bottom: -1.3rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .9rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: .74rem;
  font-weight: 700;
}

.sc-live-label i { width: .48rem; height: .48rem; background: var(--success); border-radius: 50%; }

/* Problem statement */
.sc-problems { color: #fff; background: var(--sc-ink); }
.sc-problem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.sc-problem-grid article { min-width: 0; padding: 2rem clamp(1.25rem, 2.5vw, 2rem); border-right: 1px solid rgba(255, 255, 255, .16); }
.sc-problem-grid article:first-child { padding-left: 0; }
.sc-problem-grid article:last-child { padding-right: 0; border-right: 0; }
.sc-problem-grid span { display: block; margin-bottom: 1.6rem; color: #75cada; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.sc-problem-grid h3 { margin-bottom: .6rem; color: #fff; font-size: 1.08rem; }
.sc-problem-grid p { margin: 0; color: #aebfd1; font-size: .91rem; line-height: 1.6; }

/* Benefits */
.sc-benefits { background: #fff; }
.sc-benefit-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.25rem); }
.sc-benefit-list article { min-width: 0; }
.sc-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  color: var(--sc-teal);
  background: var(--sc-teal-light);
  border: 1px solid #c9e9ed;
  border-radius: .65rem;
}

.sc-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-benefit-list h3 { margin-bottom: .55rem; font-size: 1.08rem; }
.sc-benefit-list p { margin: 0; color: var(--text-muted); font-size: .92rem; }

/* Functionalities */
.sc-features { background: var(--surface-alt); }
.sc-features-layout { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.sc-features-intro { position: sticky; top: calc(var(--header-height) + 3rem); }
.sc-features-intro h2 { max-width: 13ch; }
.sc-features-intro > p:not(.eyebrow) { max-width: 43ch; color: var(--text-muted); }
.sc-text-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: .75rem; color: var(--blue); font-size: .9rem; font-weight: 800; text-decoration: none; }
.sc-text-link:hover { color: var(--blue-hover); }

.sc-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); }
.sc-feature-list article {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .9rem;
  min-width: 0;
  padding: 1.55rem 1.4rem 1.65rem 0;
  border-bottom: 1px solid var(--border-strong);
}

.sc-feature-list article:nth-child(odd) { margin-right: 1.4rem; border-right: 1px solid var(--border-strong); }
.sc-feature-list article:nth-child(even) { padding-left: 0; }
.sc-feature-list article > span { color: var(--sc-teal); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.sc-feature-list h3 { margin-bottom: .45rem; font-size: 1.02rem; }
.sc-feature-list p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.58; }

/* Product screenshots */
.sc-gallery { background: #fff; }
.sc-gallery-list { display: grid; gap: clamp(4.5rem, 9vw, 8rem); }
.sc-gallery-item {
  display: grid;
  grid-template-columns: minmax(210px, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  margin: 0;
}

.sc-gallery-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(210px, .35fr); }
.sc-gallery-item:nth-child(even) figcaption { order: 2; }
.sc-gallery-item figcaption > span { display: block; margin-bottom: .75rem; color: var(--sc-teal); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sc-gallery-item h3 { margin-bottom: .75rem; font-size: clamp(1.45rem, 2.2vw, 2rem); }
.sc-gallery-item figcaption p { margin: 0; color: var(--text-muted); }
.sc-screenshot-link { min-width: 0; display: block; color: inherit; text-decoration: none; }
.sc-screenshot-link .sc-browser { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sc-screenshot-link:hover .sc-browser { border-color: #9cc6cc; box-shadow: 0 30px 75px rgba(7, 26, 49, .18); transform: translateY(-3px); }
.sc-expand { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; margin-top: .75rem; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.sc-expand i { color: var(--sc-teal); font-style: normal; }

/* Three-step flow */
.sc-how { background: #f5f8fb; }
.sc-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-strong);
  list-style: none;
}

.sc-steps li { position: relative; min-width: 0; padding: 2.2rem clamp(1.5rem, 3vw, 3rem) 0 0; }
.sc-steps li:not(:last-child) { border-right: 1px solid var(--border); }
.sc-steps li:not(:first-child) { padding-left: clamp(1.5rem, 3vw, 3rem); }
.sc-steps li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--sc-teal); border: 2px solid #f5f8fb; border-radius: 50%; box-shadow: 0 0 0 1px var(--sc-teal); }
.sc-steps li:not(:first-child)::before { left: clamp(1.5rem, 3vw, 3rem); }
.sc-steps li > span { display: block; margin-bottom: 1.5rem; color: var(--sc-teal); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.sc-steps h3 { max-width: 19ch; margin-bottom: .55rem; font-size: 1.1rem; }
.sc-steps p { max-width: 37ch; margin: 0; color: var(--text-muted); font-size: .92rem; }

/* Audience and final conversion */
.sc-audience { color: #fff; background: var(--navy); }
.sc-audience-layout { display: grid; grid-template-columns: minmax(0, .86fr) minmax(340px, 1.14fr); align-items: center; gap: clamp(3rem, 9vw, 9rem); }
.sc-audience h2 { color: #fff; }
.sc-audience-layout > div > p:last-child { max-width: 54ch; margin: 0; color: #b7c6d8; }
.sc-audience-list { margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .18); list-style: none; }
.sc-audience-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.1rem 0; color: #e5edf6; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: .96rem; font-weight: 600; }
.sc-audience-list span { color: #72c5d3; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }

.sc-final-cta { padding: clamp(5rem, 8vw, 8rem) 0; background: #fff; }
.sc-final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto;
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border-strong);
}

.sc-final-inner h2 { max-width: 23ch; }
.sc-final-inner > div:first-child > p:last-child { max-width: 58ch; margin: 0; color: var(--text-muted); }
.sc-final-actions { justify-content: flex-end; min-width: max-content; }
.sc-footer { background: #071a31; }

@media (max-width: 1180px) {
  .sc-menu > a:not(.btn) { font-size: .82rem; }
  .sc-hero-grid { grid-template-columns: minmax(350px, .8fr) minmax(460px, 1.2fr); gap: 3rem; }
}

@media (max-width: 1020px) {
  .sc-hero { min-height: auto; }
  .sc-hero-grid { grid-template-columns: 1fr; }
  .sc-hero-copy { max-width: 800px; }
  .sc-hero h1 { max-width: 14ch; }
  .sc-hero-product { max-width: 860px; }
  .sc-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-problem-grid article { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .sc-problem-grid article:nth-child(2) { padding-right: 0; border-right: 0; }
  .sc-problem-grid article:nth-child(3) { padding-left: 0; border-bottom: 0; }
  .sc-problem-grid article:nth-child(4) { padding-right: 0; border-right: 0; border-bottom: 0; }
  .sc-benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.25rem; }
  .sc-features-layout { grid-template-columns: 1fr; gap: 3rem; }
  .sc-features-intro { position: static; max-width: 720px; }
  .sc-features-intro h2 { max-width: 18ch; }
  .sc-audience-layout { gap: 4rem; }
  .sc-final-inner { grid-template-columns: 1fr; align-items: start; }
  .sc-final-actions { justify-content: flex-start; min-width: 0; }
}

@media (max-width: 920px) {
  .sc-product-name { margin-left: .85rem; padding-left: .85rem; font-size: .86rem; }
  .sc-menu .sc-nav-app { color: var(--sc-teal); }
}

@media (max-width: 760px) {
  .sc-section { padding: 4.5rem 0; }
  .sc-hero { padding: 4.25rem 0 5.25rem; }
  .sc-hero::before { inset: 48% 0 0; mask-image: linear-gradient(to bottom, transparent, #000 35%); }
  .sc-hero-grid { gap: 3.25rem; }
  .sc-hero h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .sc-browser-hero { transform: none; }
  .sc-live-label { right: .65rem; bottom: -.9rem; }
  .sc-feature-list { grid-template-columns: 1fr; }
  .sc-feature-list article,
  .sc-feature-list article:nth-child(odd),
  .sc-feature-list article:nth-child(even) { margin: 0; padding: 1.45rem 0; border-right: 0; }
  .sc-gallery-list { gap: 4.5rem; }
  .sc-gallery-item,
  .sc-gallery-item:nth-child(even) { grid-template-columns: 1fr; gap: 1.75rem; }
  .sc-gallery-item:nth-child(even) figcaption { order: 0; }
  .sc-steps { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--border-strong); }
  .sc-steps li,
  .sc-steps li:not(:first-child) { padding: 0 0 2.75rem 2rem; border-right: 0; }
  .sc-steps li:last-child { padding-bottom: 0; }
  .sc-steps li::before,
  .sc-steps li:not(:first-child)::before { top: .35rem; left: -5px; }
  .sc-steps li > span { margin-bottom: .4rem; }
  .sc-audience-layout { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 540px) {
  .sc-brand-group { flex: 1 1 auto; }
  .sc-product-name { margin-left: .6rem; padding-left: .6rem; font-size: .78rem; }
  .sc-hero h1 { font-size: clamp(2.35rem, 11vw, 3rem); }
  .sc-actions { display: grid; grid-template-columns: 1fr; }
  .sc-actions .btn { width: 100%; }
  .sc-hero-points { display: grid; gap: .6rem; }
  .sc-live-label { position: static; width: fit-content; margin: .8rem 0 0 auto; }
  .sc-problem-grid,
  .sc-benefit-list { grid-template-columns: 1fr; }
  .sc-problem-grid { border-bottom: 0; }
  .sc-problem-grid article,
  .sc-problem-grid article:first-child,
  .sc-problem-grid article:nth-child(2),
  .sc-problem-grid article:nth-child(3),
  .sc-problem-grid article:nth-child(4),
  .sc-problem-grid article:last-child { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .sc-problem-grid span { margin-bottom: .65rem; }
  .sc-benefit-list { gap: 2.4rem; }
  .sc-gallery-item h3 { font-size: 1.5rem; }
  .sc-browser-bar { height: 28px; padding: 0 .6rem; }
  .sc-browser-bar small { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
  .sc-final-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-browser-hero { transform: none; }
  .sc-screenshot-link .sc-browser { transition: none; }
}