/* =====================================================================
   Web Offset — v2 "Apple bright & airy" restyle
   Reuses colors_and_type.css tokens + styles.css nav/footer.
   This sheet only adds the v2 shell: cinematic hero, big-number reveal,
   sticky compare, feature moments. Amber stays the brand accent.
   ===================================================================== */

.wov2 { background: #fff; color: #1d1d1f; }
.wov2 ::selection { background: rgba(232,154,43,0.22); }

/* generous section rhythm */
.wov2-sec { padding: 130px 24px; }
.wov2-sec.pt0 { padding-top: 0; }
.wov2-inner { max-width: 1120px; margin: 0 auto; }
.wov2-inner.narrow { max-width: 900px; }
.wov2-gray { background: #f5f5f7; }
.wov2-black { background: #000; color: #f5f5f7; }

/* section eyebrow + heading (Apple: tiny amber label, giant thin-ish head) */
.wov2-eyebrow {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--prakash-amber-deep);
  text-align: center; margin: 0 0 14px;
}
.wov2-black .wov2-eyebrow { color: var(--prakash-amber-bright); }
.wov2-h {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.025em;
  text-align: center; margin: 0 auto; max-width: 15ch;
  text-wrap: balance;
}
.wov2-sub {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px); font-weight: 400;
  line-height: 1.4; letter-spacing: -0.01em;
  color: rgba(0,0,0,0.56); text-align: center;
  max-width: 640px; margin: 20px auto 0; text-wrap: pretty;
}
.wov2-black .wov2-sub { color: rgba(255,255,255,0.62); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-pmpl), transform .9s var(--ease-pmpl); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; transition:none; } }

/* ============================================================
   1 · CINEMATIC HERO
   ============================================================ */
.wov2-hero {
  position: relative;
  min-height: 92vh;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 130px 24px 0;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f5f5f7 55%, #ececef 100%);
  overflow: hidden;
}
.wov2-hero-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; letter-spacing: -0.01em;
  color: var(--prakash-amber-deep); margin: 0 0 8px;
}
.wov2-hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8.4vw, 112px);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.035em;
  margin: 0; color: #1d1d1f; text-wrap: balance;
}
.wov2-hero-tag {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 28px); font-weight: 400;
  line-height: 1.3; letter-spacing: -0.01em;
  color: rgba(0,0,0,0.58); margin: 22px auto 0; max-width: 20ch;
}
.wov2-hero-links {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
  margin-top: 26px;
}
.wov2-hero-links a {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 400; letter-spacing: -0.01em;
  color: var(--prakash-amber-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.wov2-hero-links a:hover { text-decoration: underline; }
.wov2-hero-links a::after { content: '›'; font-size: 1.25em; line-height: 1; }
/* full-bleed hero stage */
.wov2-hero-stage {
  position: relative; width: 100%; max-width: 1400px;
  margin: 46px auto 0; flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
}
.wov2-hero-stage image-slot,
.wov2-hero-stage img {
  display: block; width: 100%; height: 62vh; min-height: 440px;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}
.wov2-hero-photo-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-text); font-size: 12px; letter-spacing: -0.005em;
  color: rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 7px 15px; border-radius: 980px; border: 1px solid rgba(0,0,0,0.08);
  pointer-events: none; z-index: 4;
}
.wov2-hero-photo-hint svg { width: 13px; height: 13px; }

/* ============================================================
   2 · BIG-NUMBER SCROLL REVEAL
   ============================================================ */
.bignums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 76px; }
.bignum { text-align: center; padding: 0 20px; position: relative; }
.bignum + .bignum::before {
  content: ''; position: absolute; left: 0; top: 14%; height: 72%;
  width: 1px; background: rgba(0,0,0,0.1);
}
.wov2-black .bignum + .bignum::before { background: rgba(255,255,255,0.14); }
.bignum-n {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 92px); font-weight: 600;
  line-height: 1; letter-spacing: -0.04em; color: #1d1d1f;
}
.wov2-black .bignum-n { color: #fff; }
.bignum-n em { font-style: normal; color: var(--prakash-amber-deep); }
.wov2-black .bignum-n em { color: var(--prakash-amber-bright); }
.bignum-u { font-size: 0.42em; font-weight: 600; letter-spacing: -0.01em; color: rgba(0,0,0,0.4); }
.wov2-black .bignum-u { color: rgba(255,255,255,0.5); }
.bignum-l {
  font-family: var(--font-text);
  font-size: 15px; letter-spacing: -0.005em; color: rgba(0,0,0,0.5);
  margin-top: 14px;
}
.wov2-black .bignum-l { color: rgba(255,255,255,0.55); }

/* ============================================================
   3 · FEATURE MOMENTS (alternating, big crops)
   ============================================================ */
.moment { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; max-width: 1120px; margin: 0 auto; }
.moment + .moment { margin-top: 128px; }
.moment.flip .moment-media { order: -1; }
.moment-eyebrow {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: 0.1px;
  color: var(--prakash-amber-deep); margin-bottom: 16px;
}
.moment h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 600;
  line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 20px; color: #1d1d1f;
}
.moment p {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em;
  color: rgba(0,0,0,0.6); margin: 0; text-wrap: pretty;
}
.moment p strong { color: #1d1d1f; font-weight: 600; }
.moment-media image-slot {
  display: block; width: 100%; aspect-ratio: 5 / 4;
  border-radius: 24px; overflow: hidden;
}
.moment-media {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(160deg, #fbfbfd 0%, #eef0f3 100%);
}

/* ============================================================
   4 · STICKY COMPARE THE FOUR
   ============================================================ */
.compare-wrap { max-width: 1120px; margin: 60px auto 0; }
.compare-tabs {
  position: sticky; top: 56px; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: rgba(245,245,247,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  padding: 12px; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
}
.compare-tab {
  border: none; cursor: pointer; background: transparent;
  border-radius: 13px; padding: 14px 12px; text-align: center;
  font-family: var(--font-display); letter-spacing: -0.01em;
  transition: background .25s var(--ease-pmpl), color .25s var(--ease-pmpl);
}
.compare-tab .ct-name { display: block; font-size: 18px; font-weight: 600; color: #1d1d1f; }
.compare-tab .ct-role { display: block; font-size: 12px; font-weight: 500; color: rgba(0,0,0,0.45); margin-top: 3px; }
.compare-tab:hover { background: rgba(0,0,0,0.04); }
.compare-tab.active { background: #1d1d1f; }
.compare-tab.active .ct-name { color: #fff; }
.compare-tab.active .ct-role { color: var(--prakash-amber-bright); }

.compare-stage {
  margin-top: 20px; background: #fff;
  border: 1px solid rgba(0,0,0,0.07); border-radius: 28px;
  padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  min-height: 420px;
}
.compare-panel { display: none; }
.compare-panel.active { display: contents; }
.compare-media {
  position: relative;
  border-radius: 20px; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(160deg, #fbfbfd 0%, #eef0f3 100%);
}
.compare-media image-slot { display: block; width: 100%; height: 100%; }
.compare-badge {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase; color: #fff;
  background: var(--prakash-amber); padding: 6px 13px; border-radius: 980px;
}
.compare-body h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 6px; color: #1d1d1f;
}
.compare-role {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--prakash-amber-deep); margin-bottom: 20px;
}
.compare-desc {
  font-family: var(--font-text); font-size: 16px; line-height: 1.55; letter-spacing: -0.005em;
  color: rgba(0,0,0,0.62); margin: 0 0 24px; text-wrap: pretty;
}
.compare-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(0,0,0,0.1); }
.compare-spec { padding: 18px 14px 4px; border-left: 1px solid rgba(0,0,0,0.08); }
.compare-spec:first-child { border-left: none; padding-left: 0; }
.compare-spec .cs-n {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600;
  letter-spacing: -0.03em; color: #1d1d1f; line-height: 1;
}
.compare-spec .cs-n em { font-style: normal; color: var(--prakash-amber-deep); }
.compare-spec .cs-l {
  font-family: var(--font-text); font-size: 12px; letter-spacing: 0.2px;
  text-transform: uppercase; color: rgba(0,0,0,0.45); margin-top: 8px;
}

/* ============================================================
   5 · APPLICATIONS (airy chips)
   ============================================================ */
.apps2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1120px; margin: 64px auto 0; }
.app2 {
  background: #fff; border-radius: 20px; padding: 34px 26px;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .3s var(--ease-pmpl), box-shadow .3s var(--ease-pmpl);
}
.wov2-gray .app2 { background: #fff; }
.app2:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(0,0,0,0.08); }
.app2-ico {
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(232,154,43,0.1); color: var(--prakash-amber-deep);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.app2-ico svg { width: 26px; height: 26px; }
.app2 h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 7px; color: #1d1d1f; }
.app2 p { font-family: var(--font-text); font-size: 14px; line-height: 1.45; letter-spacing: -0.005em; color: rgba(0,0,0,0.55); margin: 0; }

/* ============================================================
   6 · PROCESS (airy numbered)
   ============================================================ */
.steps2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 64px auto 0; }
.step2 { text-align: center; }
.step2-n {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 20px;
  background: #1d1d1f; color: #fff;
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.step2 h4 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 10px; color: #1d1d1f; }
.step2 p { font-family: var(--font-text); font-size: 14.5px; line-height: 1.55; letter-spacing: -0.005em; color: rgba(0,0,0,0.55); margin: 0; }

/* ============================================================
   7 · FAQ (airy)
   ============================================================ */
.faq2 { max-width: 820px; margin: 52px auto 0; }
.faq2-item { border-bottom: 1px solid rgba(0,0,0,0.12); }
.faq2-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
  color: #1d1d1f; padding: 26px 44px 26px 0; position: relative;
}
.faq2-q::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 28px; font-weight: 300; color: var(--prakash-amber-deep);
}
.faq2-q.open::after { content: '\2212'; }
.faq2-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-pmpl); }
.faq2-a-inner {
  padding: 0 44px 28px 0;
  font-family: var(--font-text); font-size: 16px; line-height: 1.6; letter-spacing: -0.005em;
  color: rgba(0,0,0,0.6);
}
.faq2-a-inner strong { color: #1d1d1f; }
.faq2-a-inner a { color: var(--prakash-amber-deep); font-weight: 500; }

/* ============================================================
   8 · CTA (airy, full)
   ============================================================ */
.wov2-cta { background: #f5f5f7; text-align: center; padding: 130px 24px; }
.wov2-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 20px; color: #1d1d1f; text-wrap: balance;
}
.wov2-cta p {
  font-family: var(--font-display); font-size: 21px; line-height: 1.4; letter-spacing: -0.01em;
  color: rgba(0,0,0,0.55); max-width: 620px; margin: 0 auto 40px;
}
.wov2-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* pills reused from category.css assumed absent here — define local */
.wpill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 980px; padding: 13px 28px;
  font-family: var(--font-text); font-size: 17px; font-weight: 400; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s var(--ease-pmpl), color .18s var(--ease-pmpl), border-color .18s var(--ease-pmpl), gap .2s var(--ease-pmpl);
}
.wpill-amber { background: var(--prakash-amber); color: #fff; border-color: var(--prakash-amber); }
.wpill-amber:hover { background: var(--prakash-amber-deep); gap: 10px; }
.wpill-dark { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
.wpill-dark:hover { background: #000; gap: 10px; }
.wpill-outline { background: transparent; color: #1d1d1f; border-color: rgba(0,0,0,0.28); }
.wpill-outline:hover { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
.wpill-whatsapp { background: #fff; color: #1d1d1f; border-color: rgba(0,0,0,0.12); }
.wpill-whatsapp:hover { background: #ededf2; }
.wpill-whatsapp svg { width: 17px; height: 17px; color: #25d366; }

/* nav active */
.nav-link.is-active { color: var(--prakash-amber-deep); font-weight: 500; }

/* breadcrumb (reuse look) */
.wov2-crumb { background: #fff; border-bottom: 1px solid rgba(0,0,0,0.06); }
.wov2-crumb-inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 24px;
  font-family: var(--font-text); font-size: 12px; letter-spacing: -0.01em; color: rgba(0,0,0,0.45);
  display: flex; gap: 8px; align-items: center;
}
.wov2-crumb-inner a { color: rgba(0,0,0,0.55); font-size: 12px; }
.wov2-crumb-inner a:hover { color: var(--prakash-amber-deep); text-decoration: none; }
.wov2-crumb-inner strong { color: #1d1d1f; font-weight: 500; }
.wov2-crumb-inner .sep { color: rgba(0,0,0,0.25); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .wov2-sec { padding: 90px 22px; }
  .bignums { grid-template-columns: 1fr 1fr; gap: 48px 0; }
  .bignum:nth-child(3)::before { display: none; }
  .moment, .moment.flip { grid-template-columns: 1fr; gap: 32px; }
  .moment.flip .moment-media { order: 0; }
  .moment + .moment { margin-top: 80px; }
  .compare-stage { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .compare-media { order: -1; }
  .apps2 { grid-template-columns: 1fr 1fr; }
  .steps2 { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .compare-tabs { top: 0; }
}
@media (max-width: 560px) {
  .compare-tab .ct-role { display: none; }
  .compare-tab .ct-name { font-size: 15px; }
  .compare-specs { grid-template-columns: 1fr; }
  .compare-spec { border-left: none; border-top: 1px solid rgba(0,0,0,0.08); padding-left: 0; }
  .apps2 { grid-template-columns: 1fr; }
  .steps2 { grid-template-columns: 1fr; }
  .bignums { grid-template-columns: 1fr; gap: 40px; }
  .bignum::before { display: none !important; }
}