/* ==========================================================================
   WEBSITE SERVICES PAGE — Isolated Stylesheet
   All rules use body .ws-page prefix + !important on layout-critical
   properties to guarantee theme CSS cannot override them.
   ========================================================================== */

/* --- Theme Override / Neutralizer ---
   Undo ALL generic theme resets that break this page.
   --------------------------------------------------------------------- */
body .ws-page,
body .ws-page *,
body .ws-page *::before,
body .ws-page *::after {
  box-sizing: border-box !important;
}

body .ws-page h1,
body .ws-page h2,
body .ws-page h3,
body .ws-page h4,
body .ws-page h5,
body .ws-page h6,
body .ws-page p,
body .ws-page ul,
body .ws-page li {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
}

body .ws-page ul,
body .ws-page li {
  list-style: none !important;
}

body .ws-page a {
  text-decoration: none !important;
  color: inherit !important;
  transition: none !important;
}

body .ws-page img {
  max-width: 100% !important;
  display: block !important;
}

body .ws-page svg {
  display: inline-block !important;
  max-width: none !important;
}

body .ws-page button {
  font-family: inherit !important;
}

/* --- Variables --- */
body .ws-page {
  --ws-orange: #c6682d;
  --ws-orange-dark: #a85624;
  --ws-orange-light: #f4a261;
  --ws-ink: #111111;
  --ws-text: #333333;
  --ws-muted: #777777;
  --ws-light-bg: #f8f7f5;
  --ws-white: #ffffff;
  --ws-radius: 16px;
  --ws-radius-sm: 10px;
  --ws-radius-pill: 100px;
  --ws-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Page Container --- */
body .ws-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: var(--ws-text) !important;
  line-height: 1.6 !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
}

body .ws-page .ws-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  width: 100% !important;
}

body .ws-page .ws-container--narrow {
  max-width: 800px !important;
}

/* --- Shared Section Header --- */
body .ws-page .ws-section-header {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 72px !important;
}

body .ws-page .ws-label {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ws-orange) !important;
  margin-bottom: 16px !important;
}

body .ws-page .ws-section-title {
  font-size: clamp(30px, 4.5vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--ws-ink) !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}

body .ws-page .ws-section-desc {
  font-size: 17px !important;
  color: var(--ws-muted) !important;
  line-height: 1.7 !important;
}

/* --- Reveal Animation ---
   Elements start visible. JS adds .ws-will-reveal (opacity:0),
   then .is-visible to animate in. No-JS = always visible. --- */
body .ws-page .ws-will-reveal {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition: opacity 0.7s ease, transform 0.7s ease !important;
}

body .ws-page .ws-will-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ==========================================================================
   SECTION 1 — HERO (Split: Left Text + Right Mockup)
   ========================================================================== */
body .ws-page .ws-hero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--ws-white) !important;
  overflow: hidden !important;
  padding: 50px 0 60px !important;
}

/* --- Hero Entrance Animations (staggered) --- */
@keyframes wsSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wsFadeScale {
  from { opacity: 0; transform: scale(0.92) rotateY(-4deg) rotateX(2deg); }
  to { opacity: 1; transform: scale(1) rotateY(-4deg) rotateX(2deg); }
}

body .ws-page .ws-hero__badge {
  animation: wsSlideUp 0.7s var(--ws-ease) 0.1s both !important;
}
body .ws-page .ws-hero__title {
  animation: wsSlideUp 0.7s var(--ws-ease) 0.25s both !important;
}
body .ws-page .ws-hero__subtitle {
  animation: wsSlideUp 0.6s var(--ws-ease) 0.45s both !important;
}
body .ws-page .ws-hero__desc {
  animation: wsSlideUp 0.6s var(--ws-ease) 0.6s both !important;
}
body .ws-page .ws-hero__buttons {
  animation: wsSlideUp 0.6s var(--ws-ease) 0.75s both !important;
}
body .ws-page .ws-hero__mockup {
  animation: wsFadeScale 0.9s var(--ws-ease) 0.5s both !important;
}

/* Gradient blobs */
body .ws-page .ws-hero__blob {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(90px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body .ws-page .ws-hero__blob--1 {
  width: 550px !important; height: 550px !important;
  top: -120px !important; right: -80px !important;
  background: radial-gradient(circle, rgba(198,104,45,0.18), transparent 70%) !important;
  animation: wsBlobA 20s ease-in-out infinite !important;
}

body .ws-page .ws-hero__blob--2 {
  width: 420px !important; height: 420px !important;
  bottom: -60px !important; left: -60px !important;
  background: radial-gradient(circle, rgba(244,162,97,0.14), transparent 70%) !important;
  animation: wsBlobB 24s ease-in-out infinite !important;
}

body .ws-page .ws-hero__blob--3 {
  width: 300px !important; height: 300px !important;
  top: 40% !important; left: 35% !important;
  background: radial-gradient(circle, rgba(255,200,140,0.12), transparent 70%) !important;
  animation: wsBlobC 18s ease-in-out infinite !important;
}

@keyframes wsBlobA {
  0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.08)}
}
@keyframes wsBlobB {
  0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-25px)}
}
@keyframes wsBlobC {
  0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(25px,-20px) scale(1.12)}
}

/* Dot grid */
body .ws-page .ws-hero__dots {
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(0,0,0,0.045) 1px, transparent 1px) !important;
  background-size: 30px 30px !important;
  z-index: 0 !important;
}

/* Hero grid layout */
body .ws-page .ws-hero__inner {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  width: 100% !important;
}

/* LEFT — Text */
body .ws-page .ws-hero__text {
  max-width: 540px !important;
}

body .ws-page .ws-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background: rgba(198,104,45,0.08) !important;
  border: 1px solid rgba(198,104,45,0.18) !important;
  border-radius: var(--ws-radius-pill) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ws-orange) !important;
  margin-bottom: 28px !important;
}

body .ws-page .ws-hero__badge-dot {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: var(--ws-orange) !important;
  animation: wsPulse 2s ease-in-out infinite !important;
  display: inline-block !important;
}

@keyframes wsPulse {
  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)}
}

body .ws-page .ws-hero__title {
  font-size: clamp(38px, 6vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  color: var(--ws-ink) !important;
  line-height: 1.08 !important;
  margin: 0 0 8px !important;
  visibility: visible !important;
}

body .ws-page .ws-hero__title-accent {
  display: block !important;
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light)) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: wsGradShift 5s ease infinite !important;
  color: transparent !important;
}

@keyframes wsGradShift {
  0%,100%{background-position:0% center} 50%{background-position:100% center}
}

body .ws-page .ws-hero__subtitle {
  font-size: 19px !important;
  color: var(--ws-muted) !important;
  margin-bottom: 16px !important;
  min-height: 1.4em !important;
  line-height: 1.5 !important;
}

body .ws-page .ws-hero__typewriter {
  color: var(--ws-orange) !important;
  font-weight: 600 !important;
}

body .ws-page .ws-hero__cursor {
  color: var(--ws-orange) !important;
  font-weight: 300 !important;
  animation: wsBlink .7s infinite !important;
}

@keyframes wsBlink { 0%,100%{opacity:1} 50%{opacity:0} }

body .ws-page .ws-hero__desc {
  font-size: 16px !important;
  color: var(--ws-muted) !important;
  line-height: 1.75 !important;
  margin-bottom: 32px !important;
}

body .ws-page .ws-hero__buttons {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

body .ws-page .ws-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 15px 30px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--ws-radius-pill) !important;
  transition: all .35s var(--ws-ease) !important;
  cursor: pointer !important;
  border: none !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

body .ws-page .ws-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

body .ws-page .ws-btn--primary {
  background: linear-gradient(135deg, var(--ws-orange), #d4723a) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(198,104,45,0.3) !important;
}

body .ws-page .ws-btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(198,104,45,0.45) !important;
  color: #fff !important;
}

body .ws-page .ws-btn--outline {
  background: var(--ws-white) !important;
  color: var(--ws-ink) !important;
  border: 2px solid #d5d5d5 !important;
}

body .ws-page .ws-btn--outline:hover {
  border-color: var(--ws-orange) !important;
  color: var(--ws-orange) !important;
}

/* RIGHT — Laptop Mockup */
body .ws-page .ws-hero__mockup {
  position: relative !important;
  perspective: 1200px !important;
}

body .ws-page .ws-laptop {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #1a1a1a !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08) !important;
  transform: rotateY(-4deg) rotateX(2deg) !important;
  transition: transform .6s var(--ws-ease) !important;
}

body .ws-page .ws-laptop:hover {
  transform: rotateY(0) rotateX(0) !important;
}

body .ws-page .ws-laptop__bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  background: #2a2a2a !important;
}

body .ws-page .ws-laptop__dots {
  display: flex !important;
  gap: 6px !important;
}

body .ws-page .ws-laptop__dots span {
  width: 10px !important; height: 10px !important;
  border-radius: 50% !important;
  display: block !important;
}

body .ws-page .ws-laptop__dots span:nth-child(1){background:#ff5f57 !important}
body .ws-page .ws-laptop__dots span:nth-child(2){background:#febc2e !important}
body .ws-page .ws-laptop__dots span:nth-child(3){background:#28c840 !important}

body .ws-page .ws-laptop__url {
  flex: 1 !important;
  padding: 5px 14px !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body .ws-page .ws-laptop__url svg {
  width: 12px !important;
  height: 12px !important;
}

body .ws-page .ws-laptop__screen {
  position: relative !important;
  height: 340px !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* Mockup phases */
body .ws-page .ws-mock-phase {
  position: absolute !important;
  inset: 0 !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: opacity .8s ease !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

body .ws-page .ws-mock-phase.is-active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Wireframe */
body .ws-page .ws-wire { background: #e9e9e9 !important; border-radius: 6px !important; }
body .ws-page .ws-wire--nav { height: 36px !important; }
body .ws-page .ws-wire--hero-block {
  flex: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 10px !important; padding: 20px !important;
}
body .ws-page .ws-wire--title { width: 55% !important; height: 22px !important; background: #d4d4d4 !important; border-radius: 4px !important; }
body .ws-page .ws-wire--text { width: 40% !important; height: 12px !important; background: #ddd !important; border-radius: 3px !important; }
body .ws-page .ws-wire--btn { width: 90px !important; height: 28px !important; background: #ccc !important; border-radius: 14px !important; margin-top: 6px !important; }
body .ws-page .ws-wire--cols { display: flex !important; gap: 10px !important; }
body .ws-page .ws-wire--col { flex: 1 !important; height: 60px !important; background: #ebebeb !important; border-radius: 8px !important; }
body .ws-page .ws-wire--footer { height: 28px !important; }

/* Color phase */
body .ws-page .ws-cmock-nav {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 10px 16px !important; background: var(--ws-ink) !important; border-radius: 8px !important;
}
body .ws-page .ws-cmock-logo { font-weight: 700 !important; font-size: 14px !important; color: var(--ws-orange) !important; }
body .ws-page .ws-cmock-links { display: flex !important; gap: 16px !important; font-size: 11px !important; color: rgba(255,255,255,.6) !important; }
body .ws-page .ws-cmock-links span { color: rgba(255,255,255,.6) !important; }
body .ws-page .ws-cmock-hero {
  flex: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  background: linear-gradient(135deg, #faf8f6, #f2f0ed) !important; border-radius: 10px !important;
  text-align: center !important; padding: 24px !important;
}
body .ws-page .ws-cmock-hero h4 { font-size: 20px !important; font-weight: 700 !important; color: var(--ws-ink) !important; margin-bottom: 6px !important; line-height: 1.3 !important; }
body .ws-page .ws-cmock-hero p { font-size: 12px !important; color: var(--ws-muted) !important; margin-bottom: 12px !important; }
body .ws-page .ws-cmock-btn {
  display: inline-block !important;
  padding: 7px 22px !important; background: var(--ws-orange) !important; color: #fff !important;
  border-radius: var(--ws-radius-pill) !important; font-size: 11px !important; font-weight: 600 !important;
}
body .ws-page .ws-cmock-cards { display: flex !important; gap: 10px !important; }
body .ws-page .ws-cmock-card {
  flex: 1 !important; padding: 14px !important; background: #fff !important;
  border: 1px solid #eee !important; border-radius: 10px !important; text-align: center !important;
}
body .ws-page .ws-cmock-card span { font-size: 12px !important; font-weight: 600 !important; color: var(--ws-text) !important; }

/* Final phase */
body .ws-page .ws-fmock-nav {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 10px 16px !important; background: var(--ws-ink) !important; border-radius: 8px !important;
}
body .ws-page .ws-fmock-logo { font-weight: 800 !important; font-size: 14px !important; color: #fff !important; }
body .ws-page .ws-fmock-links { display: flex !important; gap: 18px !important; font-size: 11px !important; color: rgba(255,255,255,.6) !important; }
body .ws-page .ws-fmock-links span { color: rgba(255,255,255,.6) !important; }
body .ws-page .ws-fmock-cta {
  padding: 5px 14px !important; background: var(--ws-orange) !important; color: #fff !important;
  border-radius: var(--ws-radius-pill) !important; font-size: 10px !important; font-weight: 600 !important;
}
body .ws-page .ws-fmock-hero {
  flex: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  background: linear-gradient(135deg, #0d0d18, #1a1a2e) !important; border-radius: 10px !important;
  text-align: center !important; padding: 24px !important;
}
body .ws-page .ws-fmock-badge {
  display: inline-block !important; padding: 4px 12px !important;
  background: rgba(198,104,45,.12) !important; border: 1px solid rgba(198,104,45,.25) !important;
  border-radius: var(--ws-radius-pill) !important; font-size: 9px !important; font-weight: 600 !important;
  color: var(--ws-orange-light) !important; margin-bottom: 8px !important; letter-spacing: .05em !important;
}
body .ws-page .ws-fmock-hero h4 {
  font-size: 22px !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 6px !important; line-height: 1.2 !important;
}
body .ws-page .ws-fmock-hero h4 em {
  font-style: normal !important;
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light)) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
body .ws-page .ws-fmock-hero p { font-size: 11px !important; color: rgba(255,255,255,.45) !important; margin-bottom: 12px !important; max-width: 260px !important; }
body .ws-page .ws-fmock-btns { display: flex !important; gap: 8px !important; }
body .ws-page .ws-fmock-btn {
  padding: 6px 16px !important; border-radius: var(--ws-radius-pill) !important; font-size: 10px !important; font-weight: 600 !important;
  display: inline-block !important;
}
body .ws-page .ws-fmock-btn--p { background: var(--ws-orange) !important; color: #fff !important; }
body .ws-page .ws-fmock-btn--s { background: transparent !important; border: 1px solid rgba(255,255,255,.2) !important; color: rgba(255,255,255,.7) !important; }
body .ws-page .ws-fmock-cards { display: flex !important; gap: 10px !important; }
body .ws-page .ws-fmock-card {
  flex: 1 !important; padding: 14px 10px !important; background: #fff !important;
  border: 1px solid #eee !important; border-radius: 10px !important; text-align: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
body .ws-page .ws-fmock-card strong { display: block !important; font-size: 12px !important; color: var(--ws-ink) !important; margin-bottom: 2px !important; }
body .ws-page .ws-fmock-card span { font-size: 10px !important; color: var(--ws-muted) !important; }
body .ws-page .ws-fmock-card-icon {
  width: 36px !important; height: 36px !important; margin: 0 auto 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(198,104,45,.08) !important; border-radius: 10px !important;
}
body .ws-page .ws-fmock-card-icon svg { width: 20px !important; height: 20px !important; }

/* Mockup progress bar */
body .ws-page .ws-laptop__progress {
  height: 3px !important; background: #222 !important;
}
body .ws-page .ws-laptop__progress-fill {
  height: 100% !important; width: 33% !important;
  background: linear-gradient(90deg, var(--ws-orange), var(--ws-orange-light)) !important;
  transition: width .4s ease !important;
}
body .ws-page .ws-laptop__phases {
  display: flex !important; justify-content: space-around !important;
  padding: 10px 16px !important; background: #2a2a2a !important;
}
body .ws-page .ws-laptop__phase {
  font-size: 11px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.25) !important; transition: color .3s !important;
}
body .ws-page .ws-laptop__phase.is-active { color: var(--ws-orange) !important; }

/* Floating accent cards */
body .ws-page .ws-hero__floats {
  position: absolute !important; inset: 0 !important;
  z-index: 1 !important; pointer-events: none !important;
}

body .ws-page .ws-hf {
  position: absolute !important;
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.07) !important;
  animation: wsHFloat 7s ease-in-out infinite !important;
}

body .ws-page .ws-hf--dark {
  background: rgba(20,20,30,.88) !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #fff !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.18) !important;
}

body .ws-page .ws-hf--accent {
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light)) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 8px 24px rgba(198,104,45,.35) !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 10px 16px !important;
}
body .ws-page .ws-hf--accent svg { width: 20px !important; height: 20px !important; }

body .ws-page .ws-hf--1 { top: 8% !important; left: 2% !important; animation-delay: 0s !important; }
body .ws-page .ws-hf--2 { top: 15% !important; right: 2% !important; animation-delay: 1.2s !important; }
body .ws-page .ws-hf--3 { bottom: 20% !important; left: 1% !important; animation-delay: .6s !important; }
body .ws-page .ws-hf--4 { bottom: 8% !important; right: 4% !important; animation-delay: 1.8s !important; }

@keyframes wsHFloat {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}
}

body .ws-page .ws-hf__tag { font-size: 24px !important; font-weight: 800 !important; line-height: 1 !important; color: #fff !important; }
body .ws-page .ws-hf__label { font-size: 10px !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
body .ws-page .ws-hf__chart svg { width: 100px !important; height: 32px !important; margin-top: 6px !important; }
body .ws-page .ws-hf__stars { display: flex !important; gap: 2px !important; margin-bottom: 4px !important; }
body .ws-page .ws-hf__stars svg { width: 13px !important; height: 13px !important; }
body .ws-page .ws-hf__review { font-size: 11px !important; font-weight: 600 !important; color: var(--ws-text) !important; font-style: italic !important; }
body .ws-page .ws-hf--accent span { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; }

/* Scroll mouse */
body .ws-page .ws-hero__scroll {
  position: absolute !important; bottom: 28px !important; left: 50% !important; transform: translateX(-50%) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important;
  z-index: 3 !important;
}
body .ws-page .ws-hero__scroll span {
  font-size: 10px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #bbb !important; font-weight: 500 !important;
}
body .ws-page .ws-scroll-mouse {
  width: 22px !important; height: 34px !important; border: 2px solid #ccc !important; border-radius: 11px !important; position: relative !important;
  background: transparent !important;
}
body .ws-page .ws-scroll-wheel {
  width: 3px !important; height: 7px !important; background: var(--ws-orange) !important; border-radius: 2px !important;
  position: absolute !important; top: 5px !important; left: 50% !important; transform: translateX(-50%) !important;
  animation: wsWheel 1.8s ease-in-out infinite !important;
}
@keyframes wsWheel {
  0%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(12px)}
}


/* ==========================================================================
   SECTION 2 — SERVICES (Interactive Showcase)
   ========================================================================== */
body .ws-page .ws-services {
  padding: 120px 0 !important;
  background: var(--ws-white) !important;
}

/* Showcase: split layout */
body .ws-page .ws-showcase {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 48px !important;
  align-items: start !important;
}

/* --- LEFT: Visual Panel --- */
body .ws-page .ws-showcase__visual {
  position: sticky !important;
  top: 120px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--ws-light-bg) !important;
  border: 1px solid #eee !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.07) !important;
}

body .ws-page .ws-showcase__screen {
  position: relative !important;
  height: 420px !important;
  overflow: hidden !important;
}

body .ws-page .ws-showcase__scene {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px !important;
  opacity: 0 !important;
  transform: scale(0.94) !important;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
  pointer-events: none !important;
}

body .ws-page .ws-showcase__scene.is-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* --- Scene: E-Commerce --- */
body .ws-page .ws-scene-ecom { width: 100% !important; }
body .ws-page .ws-scene-ecom__nav {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  margin-bottom: 14px !important; gap: 10px !important;
}
body .ws-page .ws-scene-ecom__logo {
  font-size: 14px !important; font-weight: 800 !important; color: var(--ws-ink) !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important;
}
body .ws-page .ws-scene-ecom__logo svg { color: var(--ws-orange) !important; flex-shrink: 0 !important; }
body .ws-page .ws-scene-ecom__search {
  flex: 1 !important; display: flex !important; align-items: center !important; gap: 6px !important;
  background: #f5f5f5 !important; border-radius: 20px !important; padding: 6px 12px !important;
  max-width: 180px !important;
}
body .ws-page .ws-scene-ecom__search span {
  font-size: 11px !important; color: #aaa !important; white-space: nowrap !important;
}
body .ws-page .ws-scene-ecom__nav-icons {
  display: flex !important; align-items: center !important; gap: 10px !important;
}
body .ws-page .ws-scene-ecom__nav-icons > svg { color: #ccc !important; flex-shrink: 0 !important; }
body .ws-page .ws-scene-ecom__cart-icon {
  position: relative !important;
}
body .ws-page .ws-scene-ecom__cart-icon svg { color: var(--ws-ink) !important; }
body .ws-page .ws-scene-ecom__badge {
  position: absolute !important; top: -6px !important; right: -8px !important;
  width: 16px !important; height: 16px !important; border-radius: 50% !important;
  background: var(--ws-orange) !important; color: #fff !important;
  font-size: 9px !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important;
}

body .ws-page .ws-scene-ecom__cats {
  display: flex !important; gap: 6px !important; margin-bottom: 14px !important;
}
body .ws-page .ws-scene-ecom__cat {
  font-size: 10px !important; font-weight: 600 !important; padding: 4px 12px !important;
  border-radius: 20px !important; background: #f5f5f5 !important; color: #888 !important;
  cursor: default !important; transition: all .2s ease !important;
}
body .ws-page .ws-scene-ecom__cat--active {
  background: var(--ws-ink) !important; color: #fff !important;
}

body .ws-page .ws-scene-ecom__grid {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important;
}
body .ws-page .ws-scene-ecom__card {
  background: var(--ws-white) !important; border-radius: 12px !important;
  border: 1px solid #f0f0f0 !important; transition: all .3s ease !important;
  overflow: hidden !important;
  animation: wsCardPop 0.5s ease both !important;
}
body .ws-page .ws-scene-ecom__card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}
body .ws-page .ws-scene-ecom__card--1 { animation-delay: 0s !important; }
body .ws-page .ws-scene-ecom__card--2 { animation-delay: .1s !important; }
body .ws-page .ws-scene-ecom__card--3 { animation-delay: .2s !important; }
body .ws-page .ws-scene-ecom__card--4 { animation-delay: .3s !important; }

@keyframes wsCardPop {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body .ws-page .ws-scene-ecom__img {
  height: 72px !important; background: linear-gradient(135deg, #f7f5f2, #ede9e3) !important;
  position: relative !important; display: flex !important; align-items: center !important;
  justify-content: center !important;
}
body .ws-page .ws-scene-ecom__img--2 { background: linear-gradient(135deg, #f0f4f8, #e3eaf2) !important; }
body .ws-page .ws-scene-ecom__img--3 { background: linear-gradient(135deg, #fef9f0, #fdf0db) !important; }
body .ws-page .ws-scene-ecom__img--4 { background: linear-gradient(135deg, #f0f8f4, #dff0e6) !important; }

body .ws-page .ws-scene-ecom__prod-icon { opacity: .35 !important; }

body .ws-page .ws-scene-ecom__heart {
  position: absolute !important; top: 6px !important; right: 6px !important;
  cursor: pointer !important; opacity: .5 !important; transition: opacity .2s !important;
}
body .ws-page .ws-scene-ecom__heart[fill="#e74c3c"] { opacity: 1 !important; }

body .ws-page .ws-scene-ecom__tag {
  position: absolute !important; top: 6px !important; left: 6px !important;
  font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important;
  padding: 2px 7px !important; border-radius: 4px !important;
  background: var(--ws-orange) !important; color: #fff !important;
  letter-spacing: .03em !important;
}
body .ws-page .ws-scene-ecom__tag--new { background: #3b82f6 !important; }
body .ws-page .ws-scene-ecom__tag--sale { background: #ef4444 !important; }

body .ws-page .ws-scene-ecom__info { padding: 8px 10px 10px !important; }
body .ws-page .ws-scene-ecom__name {
  font-size: 11px !important; font-weight: 600 !important; color: var(--ws-ink) !important;
  margin-bottom: 3px !important; line-height: 1.2 !important;
}
body .ws-page .ws-scene-ecom__stars {
  font-size: 10px !important; color: #f59e0b !important; margin-bottom: 5px !important;
  display: flex !important; align-items: center !important; gap: 3px !important;
}
body .ws-page .ws-scene-ecom__stars span {
  font-size: 9px !important; color: #aaa !important; font-weight: 500 !important;
}
body .ws-page .ws-scene-ecom__row {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
body .ws-page .ws-scene-ecom__price {
  font-size: 13px !important; font-weight: 700 !important; color: var(--ws-ink) !important;
}
body .ws-page .ws-scene-ecom__price s {
  color: #ccc !important; font-size: 10px !important; font-weight: 400 !important;
  margin-right: 3px !important;
}
body .ws-page .ws-scene-ecom__add {
  width: 24px !important; height: 24px !important; border-radius: 50% !important;
  border: none !important; background: var(--ws-orange) !important; color: #fff !important;
  font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: transform .2s ease !important; line-height: 1 !important;
  padding: 0 !important;
}
body .ws-page .ws-scene-ecom__add--added {
  background: #10b981 !important; font-size: 11px !important;
}

/* --- Scene: Corporate --- */
body .ws-page .ws-scene-corp { width: 100% !important; }
body .ws-page .ws-scene-corp__header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  margin-bottom: 16px !important; gap: 8px !important;
}
body .ws-page .ws-scene-corp__logo-block {
  display: flex !important; align-items: center !important; gap: 6px !important;
}
body .ws-page .ws-scene-corp__logo-icon {
  width: 26px !important; height: 26px !important; border-radius: 7px !important;
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light)) !important;
}
body .ws-page .ws-scene-corp__logo-block span {
  font-size: 14px !important; font-weight: 800 !important; color: var(--ws-ink) !important;
  letter-spacing: .05em !important;
}
body .ws-page .ws-scene-corp__nav-links {
  display: flex !important; gap: 14px !important;
}
body .ws-page .ws-scene-corp__link {
  font-size: 10px !important; font-weight: 500 !important; color: #999 !important;
  cursor: default !important; transition: color .2s !important;
}
body .ws-page .ws-scene-corp__link--active {
  color: var(--ws-ink) !important; font-weight: 600 !important;
}
body .ws-page .ws-scene-corp__cta-btn {
  font-size: 9px !important; font-weight: 600 !important; color: #fff !important;
  background: var(--ws-ink) !important; padding: 5px 12px !important;
  border-radius: 20px !important; white-space: nowrap !important;
}
body .ws-page .ws-scene-corp__hero {
  background: linear-gradient(135deg, #1a1a2e, #16213e) !important; border-radius: 14px !important;
  padding: 24px 22px !important; margin-bottom: 12px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  text-align: center !important; gap: 6px !important; position: relative !important;
  overflow: hidden !important;
}
body .ws-page .ws-scene-corp__hero::before {
  content: '' !important; position: absolute !important; top: -30px !important; right: -30px !important;
  width: 100px !important; height: 100px !important; border-radius: 50% !important;
  background: var(--ws-orange) !important; opacity: .12 !important;
}
body .ws-page .ws-scene-corp__hero::after {
  content: '' !important; position: absolute !important; bottom: -20px !important; left: -20px !important;
  width: 70px !important; height: 70px !important; border-radius: 50% !important;
  background: #3b82f6 !important; opacity: .08 !important;
}
body .ws-page .ws-scene-corp__hero-badge {
  font-size: 8px !important; font-weight: 600 !important; color: var(--ws-orange) !important;
  background: rgba(198,104,45,.12) !important; padding: 3px 10px !important;
  border-radius: 20px !important; letter-spacing: .03em !important;
  text-transform: uppercase !important; position: relative !important; z-index: 1 !important;
}
body .ws-page .ws-scene-corp__title {
  font-size: 16px !important; font-weight: 800 !important; color: #fff !important;
  line-height: 1.25 !important; position: relative !important; z-index: 1 !important;
}
body .ws-page .ws-scene-corp__subtitle {
  font-size: 10px !important; color: rgba(255,255,255,.55) !important;
  position: relative !important; z-index: 1 !important; margin-bottom: 4px !important;
}
body .ws-page .ws-scene-corp__hero-actions {
  display: flex !important; gap: 8px !important; position: relative !important; z-index: 1 !important;
}
body .ws-page .ws-scene-corp__btn-primary {
  font-size: 9px !important; font-weight: 600 !important; color: #fff !important;
  background: var(--ws-orange) !important; padding: 6px 14px !important;
  border-radius: 20px !important; white-space: nowrap !important;
}
body .ws-page .ws-scene-corp__btn-outline {
  font-size: 9px !important; font-weight: 600 !important; color: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(255,255,255,.2) !important; padding: 5px 14px !important;
  border-radius: 20px !important; white-space: nowrap !important;
  display: flex !important; align-items: center !important; gap: 4px !important;
}
body .ws-page .ws-scene-corp__btn-outline span {
  font-size: 7px !important; color: rgba(255,255,255,.7) !important;
}
body .ws-page .ws-scene-corp__features {
  display: flex !important; gap: 10px !important; margin-bottom: 12px !important;
}
body .ws-page .ws-scene-corp__feat {
  flex: 1 !important; display: flex !important; align-items: center !important; gap: 8px !important;
  background: var(--ws-white) !important; border: 1px solid #f0f0f0 !important;
  border-radius: 10px !important; padding: 10px !important;
  transition: box-shadow .3s ease !important;
}
body .ws-page .ws-scene-corp__feat:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}
body .ws-page .ws-scene-corp__feat-icon {
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(198,104,45,.1), rgba(198,104,45,.05)) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
body .ws-page .ws-scene-corp__feat-icon svg { stroke: var(--ws-orange) !important; }
body .ws-page .ws-scene-corp__feat-label {
  font-size: 10px !important; font-weight: 600 !important; color: var(--ws-ink) !important;
  line-height: 1.3 !important;
}
body .ws-page .ws-scene-corp__stats { display: flex !important; gap: 10px !important; }
body .ws-page .ws-scene-corp__stat {
  flex: 1 !important; text-align: center !important; background: var(--ws-white) !important;
  border: 1px solid #f0f0f0 !important; border-radius: 10px !important; padding: 10px 6px !important;
}
body .ws-page .ws-scene-corp__stat strong { display: block !important; font-size: 18px !important; font-weight: 800 !important; color: var(--ws-orange) !important; }
body .ws-page .ws-scene-corp__stat span { font-size: 10px !important; color: var(--ws-muted) !important; }

/* --- Scene: Landing Page --- */
body .ws-page .ws-scene-landing { width: 100% !important; text-align: center !important; }
body .ws-page .ws-scene-landing__topbar {
  height: 3px !important; background: #f0f0f0 !important; border-radius: 2px !important;
  margin-bottom: 16px !important; overflow: hidden !important;
}
body .ws-page .ws-scene-landing__progress {
  height: 100% !important; width: 70% !important;
  background: linear-gradient(90deg, var(--ws-orange), var(--ws-orange-light)) !important;
  border-radius: 2px !important; animation: wsProgress 2.5s ease-in-out infinite !important;
}
@keyframes wsProgress { 0%{width:0} 50%{width:70%} 100%{width:100%} }

body .ws-page .ws-scene-landing__hero { margin-bottom: 14px !important; }
body .ws-page .ws-scene-landing__rocket {
  display: inline-flex !important; margin-bottom: 8px !important;
  animation: wsRocket 2s ease-in-out infinite !important;
}
body .ws-page .ws-scene-landing__rocket svg { stroke: var(--ws-orange) !important; }
@keyframes wsRocket { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

body .ws-page .ws-scene-landing__title {
  font-size: 22px !important; font-weight: 800 !important; color: var(--ws-ink) !important;
  margin-bottom: 4px !important;
}
body .ws-page .ws-scene-landing__sub { font-size: 11px !important; color: var(--ws-muted) !important; }

body .ws-page .ws-scene-landing__form {
  display: flex !important; gap: 0 !important; max-width: 280px !important; margin: 0 auto 12px !important;
  border-radius: var(--ws-radius-pill) !important; overflow: hidden !important;
  border: 1px solid #e5e5e5 !important;
}
body .ws-page .ws-scene-landing__input {
  flex: 1 !important; height: 34px !important; background: var(--ws-white) !important;
  display: flex !important; align-items: center !important; padding-left: 14px !important;
}
body .ws-page .ws-scene-landing__input span {
  font-size: 10px !important; color: #bbb !important;
}
body .ws-page .ws-scene-landing__btn {
  padding: 0 16px !important; background: var(--ws-orange) !important; color: #fff !important;
  font-size: 10px !important; font-weight: 600 !important; display: flex !important;
  align-items: center !important; white-space: nowrap !important;
}

body .ws-page .ws-scene-landing__trust {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px !important; margin-bottom: 12px !important;
}
body .ws-page .ws-scene-landing__trust > span {
  font-size: 9px !important; color: #bbb !important; white-space: nowrap !important;
}
body .ws-page .ws-scene-landing__logos {
  display: flex !important; gap: 8px !important; align-items: center !important;
}
body .ws-page .ws-scene-landing__fake-logo {
  height: 14px !important; border-radius: 3px !important; background: #e8e8e8 !important;
}
body .ws-page .ws-scene-landing__fake-logo--1 { width: 40px !important; }
body .ws-page .ws-scene-landing__fake-logo--2 { width: 32px !important; }
body .ws-page .ws-scene-landing__fake-logo--3 { width: 44px !important; }
body .ws-page .ws-scene-landing__fake-logo--4 { width: 36px !important; }

body .ws-page .ws-scene-landing__pills {
  display: flex !important; gap: 6px !important; justify-content: center !important;
  margin-bottom: 14px !important;
}
body .ws-page .ws-scene-landing__pill {
  display: flex !important; align-items: center !important; gap: 4px !important;
  font-size: 9px !important; font-weight: 600 !important; color: var(--ws-ink) !important;
  background: #f8f8f8 !important; border: 1px solid #f0f0f0 !important;
  padding: 4px 10px !important; border-radius: 20px !important;
}
body .ws-page .ws-scene-landing__pill svg { stroke: var(--ws-orange) !important; flex-shrink: 0 !important; }

body .ws-page .ws-scene-landing__metrics {
  display: flex !important; gap: 8px !important; justify-content: center !important;
}
body .ws-page .ws-scene-landing__metric-card {
  flex: 1 !important; background: var(--ws-white) !important; border: 1px solid #f0f0f0 !important;
  border-radius: 10px !important; padding: 10px 8px !important; text-align: left !important;
}
body .ws-page .ws-scene-landing__metric-val {
  font-size: 16px !important; font-weight: 800 !important; margin-bottom: 2px !important;
}
body .ws-page .ws-scene-landing__metric-val--up { color: #10b981 !important; }
body .ws-page .ws-scene-landing__metric-val--down { color: #10b981 !important; }
body .ws-page .ws-scene-landing__metric-label {
  font-size: 9px !important; color: #999 !important; margin-bottom: 6px !important;
}
body .ws-page .ws-scene-landing__metric-bar {
  height: 4px !important; background: #f0f0f0 !important; border-radius: 2px !important;
  overflow: hidden !important;
}
body .ws-page .ws-scene-landing__metric-fill {
  height: 100% !important; background: var(--ws-orange) !important; border-radius: 2px !important;
  transition: width 1s ease !important;
}
body .ws-page .ws-scene-landing__metric-fill--green {
  background: #10b981 !important;
}

/* --- Scene: Web App --- */
body .ws-page .ws-scene-app {
  width: 100% !important; display: flex !important; gap: 0 !important;
  background: var(--ws-white) !important; border-radius: 14px !important; overflow: hidden !important;
  border: 1px solid #eee !important; height: 320px !important;
}
body .ws-page .ws-scene-app__sidebar {
  width: 48px !important; background: var(--ws-ink) !important; padding: 10px 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important;
}
body .ws-page .ws-scene-app__sidebar-logo {
  width: 30px !important; height: 30px !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  margin-bottom: 8px !important;
}
body .ws-page .ws-scene-app__nav-item {
  width: 30px !important; height: 30px !important; border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  color: rgba(255,255,255,.35) !important; transition: all .2s !important;
}
body .ws-page .ws-scene-app__nav-item--active {
  background: var(--ws-orange) !important; color: #fff !important;
}
body .ws-page .ws-scene-app__nav-item--bottom {
  margin-top: auto !important;
}
body .ws-page .ws-scene-app__main {
  flex: 1 !important; padding: 12px 14px !important; display: flex !important;
  flex-direction: column !important; gap: 10px !important; overflow: hidden !important;
}
body .ws-page .ws-scene-app__topbar {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
}
body .ws-page .ws-scene-app__page-title {
  font-size: 13px !important; font-weight: 700 !important; color: var(--ws-ink) !important;
}
body .ws-page .ws-scene-app__topbar-right {
  display: flex !important; align-items: center !important; gap: 8px !important;
}
body .ws-page .ws-scene-app__search {
  width: 26px !important; height: 26px !important; background: #f5f5f5 !important;
  border-radius: 6px !important; display: flex !important; align-items: center !important;
  justify-content: center !important;
}
body .ws-page .ws-scene-app__notif {
  position: relative !important; display: flex !important; align-items: center !important;
  justify-content: center !important;
}
body .ws-page .ws-scene-app__notif-dot {
  position: absolute !important; top: -2px !important; right: -2px !important;
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: #ef4444 !important;
}
body .ws-page .ws-scene-app__avatar {
  width: 24px !important; height: 24px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light)) !important;
}

body .ws-page .ws-scene-app__stats { display: flex !important; gap: 8px !important; }
body .ws-page .ws-scene-app__stat-card {
  flex: 1 !important; display: flex !important; align-items: center !important; gap: 8px !important;
  background: #fafafa !important; border: 1px solid #f0f0f0 !important;
  border-radius: 8px !important; padding: 8px !important;
}
body .ws-page .ws-scene-app__stat-icon {
  width: 26px !important; height: 26px !important; border-radius: 6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
body .ws-page .ws-scene-app__stat-icon--blue {
  background: rgba(59,130,246,.1) !important; color: #3b82f6 !important;
}
body .ws-page .ws-scene-app__stat-icon--blue svg { stroke: #3b82f6 !important; }
body .ws-page .ws-scene-app__stat-icon--green {
  background: rgba(16,185,129,.1) !important; color: #10b981 !important;
}
body .ws-page .ws-scene-app__stat-icon--green svg { stroke: #10b981 !important; }
body .ws-page .ws-scene-app__stat-icon--orange {
  background: rgba(198,104,45,.1) !important; color: var(--ws-orange) !important;
}
body .ws-page .ws-scene-app__stat-icon--orange svg { stroke: var(--ws-orange) !important; }
body .ws-page .ws-scene-app__stat-val {
  font-size: 13px !important; font-weight: 800 !important; color: var(--ws-ink) !important;
  line-height: 1.1 !important;
}
body .ws-page .ws-scene-app__stat-label {
  font-size: 9px !important; color: #999 !important;
  display: flex !important; align-items: center !important; gap: 4px !important;
}
body .ws-page .ws-scene-app__trend {
  font-size: 8px !important; font-weight: 700 !important; padding: 1px 4px !important;
  border-radius: 3px !important;
}
body .ws-page .ws-scene-app__trend--up {
  color: #10b981 !important; background: rgba(16,185,129,.1) !important;
}

body .ws-page .ws-scene-app__content {
  display: flex !important; gap: 10px !important; flex: 1 !important; min-height: 0 !important;
}
body .ws-page .ws-scene-app__chart {
  flex: 1.5 !important; background: #fafafa !important; border: 1px solid #f0f0f0 !important;
  border-radius: 8px !important; padding: 10px !important; display: flex !important;
  flex-direction: column !important;
}
body .ws-page .ws-scene-app__chart-header {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  margin-bottom: 8px !important;
}
body .ws-page .ws-scene-app__chart-title {
  font-size: 10px !important; font-weight: 600 !important; color: var(--ws-ink) !important;
}
body .ws-page .ws-scene-app__chart-period {
  font-size: 8px !important; color: #bbb !important; background: #f0f0f0 !important;
  padding: 2px 6px !important; border-radius: 4px !important;
}
body .ws-page .ws-scene-app__chart svg { width: 100% !important; flex: 1 !important; }

body .ws-page .ws-scene-app__activity {
  flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 6px !important;
}
body .ws-page .ws-scene-app__activity-title {
  font-size: 10px !important; font-weight: 600 !important; color: var(--ws-ink) !important;
  margin-bottom: 2px !important;
}
body .ws-page .ws-scene-app__activity-item {
  display: flex !important; align-items: center !important; gap: 6px !important;
  background: #fafafa !important; border: 1px solid #f0f0f0 !important;
  border-radius: 6px !important; padding: 7px 8px !important;
}
body .ws-page .ws-scene-app__activity-dot {
  width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important;
}
body .ws-page .ws-scene-app__activity-dot--green { background: #10b981 !important; }
body .ws-page .ws-scene-app__activity-dot--blue { background: #3b82f6 !important; }
body .ws-page .ws-scene-app__activity-dot--orange { background: var(--ws-orange) !important; }
body .ws-page .ws-scene-app__activity-text {
  font-size: 9px !important; color: #888 !important; line-height: 1.2 !important;
}
body .ws-page .ws-scene-app__activity-text strong {
  color: var(--ws-ink) !important; font-weight: 600 !important;
}

/* --- Scene: Redesign --- */
body .ws-page .ws-scene-redesign { width: 100% !important; }
body .ws-page .ws-scene-redesign__split {
  display: flex !important; gap: 12px !important; align-items: stretch !important;
  margin-bottom: 14px !important;
}
body .ws-page .ws-scene-redesign__side {
  flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 8px !important;
}
body .ws-page .ws-scene-redesign__label {
  font-size: 9px !important; font-weight: 700 !important; color: #bbb !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
}
body .ws-page .ws-scene-redesign__label--new { color: var(--ws-orange) !important; }

body .ws-page .ws-scene-redesign__mockup {
  border-radius: 10px !important; overflow: hidden !important; border: 1px solid #eee !important;
}
body .ws-page .ws-scene-redesign__mockup--old { opacity: .7 !important; filter: grayscale(.3) !important; }
body .ws-page .ws-scene-redesign__mockup--new {
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}

/* Old mockup internals */
body .ws-page .ws-scene-redesign__mock-nav-old {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 6px 10px !important; background: #e8e8e8 !important;
}
body .ws-page .ws-scene-redesign__mock-logo-old {
  width: 28px !important; height: 10px !important; background: #ccc !important; border-radius: 2px !important;
}
body .ws-page .ws-scene-redesign__mock-links-old {
  display: flex !important; gap: 4px !important;
}
body .ws-page .ws-scene-redesign__mock-links-old span {
  width: 18px !important; height: 4px !important; background: #d0d0d0 !important;
  border-radius: 2px !important; display: block !important;
}
body .ws-page .ws-scene-redesign__mock-hero-old {
  padding: 14px 10px !important; background: #f0f0f0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important;
}
body .ws-page .ws-scene-redesign__mock-h1-old {
  width: 70% !important; height: 8px !important; background: #d5d5d5 !important; border-radius: 2px !important;
}
body .ws-page .ws-scene-redesign__mock-p-old {
  width: 50% !important; height: 5px !important; background: #ddd !important; border-radius: 2px !important;
}
body .ws-page .ws-scene-redesign__mock-btn-old {
  width: 40px !important; height: 12px !important; background: #ccc !important; border-radius: 3px !important;
  margin-top: 2px !important;
}
body .ws-page .ws-scene-redesign__mock-grid-old {
  display: flex !important; gap: 4px !important; padding: 8px 10px !important;
}
body .ws-page .ws-scene-redesign__mock-grid-old > div {
  flex: 1 !important; height: 20px !important; background: #eaeaea !important; border-radius: 3px !important;
}

/* New mockup internals */
body .ws-page .ws-scene-redesign__mock-nav-new {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 6px 10px !important; background: var(--ws-ink) !important;
}
body .ws-page .ws-scene-redesign__mock-logo-new {
  width: 14px !important; height: 14px !important; background: var(--ws-orange) !important;
  border-radius: 4px !important;
}
body .ws-page .ws-scene-redesign__mock-links-new {
  display: flex !important; gap: 5px !important;
}
body .ws-page .ws-scene-redesign__mock-links-new span {
  width: 18px !important; height: 3px !important; background: rgba(255,255,255,.25) !important;
  border-radius: 2px !important; display: block !important;
}
body .ws-page .ws-scene-redesign__mock-cta-new {
  font-size: 6px !important; font-weight: 700 !important; color: #fff !important;
  background: var(--ws-orange) !important; padding: 2px 6px !important;
  border-radius: 8px !important;
}
body .ws-page .ws-scene-redesign__mock-hero-new {
  padding: 14px 10px !important;
  background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important;
}
body .ws-page .ws-scene-redesign__mock-h1-new {
  width: 65% !important; height: 8px !important; background: rgba(255,255,255,.3) !important;
  border-radius: 2px !important;
}
body .ws-page .ws-scene-redesign__mock-p-new {
  width: 45% !important; height: 4px !important; background: rgba(255,255,255,.12) !important;
  border-radius: 2px !important;
}
body .ws-page .ws-scene-redesign__mock-btns-new {
  display: flex !important; gap: 4px !important; margin-top: 3px !important;
}
body .ws-page .ws-scene-redesign__mock-btn-new {
  width: 32px !important; height: 10px !important; background: var(--ws-orange) !important;
  border-radius: 5px !important;
}
body .ws-page .ws-scene-redesign__mock-btn-new--outline {
  background: transparent !important; border: 1px solid rgba(255,255,255,.2) !important;
}
body .ws-page .ws-scene-redesign__mock-grid-new {
  display: flex !important; gap: 4px !important; padding: 8px 10px !important;
}
body .ws-page .ws-scene-redesign__mock-grid-new > div {
  flex: 1 !important; height: 22px !important; background: #f8f8f8 !important;
  border-radius: 5px !important; border: 1px solid #f0f0f0 !important;
}

/* Score badges */
body .ws-page .ws-scene-redesign__score {
  display: flex !important; align-items: center !important; gap: 8px !important;
}
body .ws-page .ws-scene-redesign__score-ring {
  width: 32px !important; height: 32px !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; border: 3px solid transparent !important;
}
body .ws-page .ws-scene-redesign__score-ring--bad {
  border-color: #ef4444 !important; background: rgba(239,68,68,.06) !important;
}
body .ws-page .ws-scene-redesign__score-ring--bad span {
  font-size: 11px !important; font-weight: 800 !important; color: #ef4444 !important;
}
body .ws-page .ws-scene-redesign__score-ring--good {
  border-color: #10b981 !important; background: rgba(16,185,129,.06) !important;
}
body .ws-page .ws-scene-redesign__score-ring--good span {
  font-size: 10px !important; font-weight: 800 !important; color: #10b981 !important;
}
body .ws-page .ws-scene-redesign__score-val {
  font-size: 13px !important; font-weight: 700 !important; color: var(--ws-ink) !important;
  line-height: 1 !important;
}
body .ws-page .ws-scene-redesign__score-lbl {
  font-size: 9px !important; color: #999 !important;
}

body .ws-page .ws-scene-redesign__divider {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
body .ws-page .ws-scene-redesign__arrow {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: var(--ws-orange) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 12px rgba(198,104,45,.3) !important;
  animation: wsPulseArrow 2s ease-in-out infinite !important;
}
@keyframes wsPulseArrow {
  0%,100% { box-shadow: 0 4px 12px rgba(198,104,45,.3); }
  50% { box-shadow: 0 4px 20px rgba(198,104,45,.5); }
}

/* Improvement metrics row */
body .ws-page .ws-scene-redesign__metrics {
  display: flex !important; gap: 8px !important; justify-content: center !important;
}
body .ws-page .ws-scene-redesign__met {
  display: flex !important; align-items: center !important; gap: 5px !important;
  background: rgba(16,185,129,.06) !important; border: 1px solid rgba(16,185,129,.12) !important;
  border-radius: 20px !important; padding: 5px 10px !important;
}
body .ws-page .ws-scene-redesign__met span {
  font-size: 9px !important; color: #666 !important;
}
body .ws-page .ws-scene-redesign__met strong {
  color: #10b981 !important; font-weight: 700 !important;
}

/* --- Scene: SEO --- */
body .ws-page .ws-scene-seo { width: 100% !important; }

/* Google search preview */
body .ws-page .ws-scene-seo__search-preview {
  margin-bottom: 14px !important; background: var(--ws-white) !important;
  border: 1px solid #f0f0f0 !important; border-radius: 10px !important;
  padding: 10px !important; overflow: hidden !important;
}
body .ws-page .ws-scene-seo__gbar {
  display: flex !important; align-items: center !important; gap: 6px !important;
  background: #f8f8f8 !important; border-radius: 20px !important; padding: 5px 10px !important;
  margin-bottom: 10px !important;
}
body .ws-page .ws-scene-seo__gbar span {
  font-size: 10px !important; color: #999 !important;
}
body .ws-page .ws-scene-seo__result-url {
  font-size: 9px !important; color: #202124 !important; margin-bottom: 2px !important;
}
body .ws-page .ws-scene-seo__result-title {
  font-size: 13px !important; font-weight: 600 !important; color: #1a0dab !important;
  margin-bottom: 2px !important; line-height: 1.3 !important;
}
body .ws-page .ws-scene-seo__result-desc {
  font-size: 9px !important; color: #545454 !important; line-height: 1.4 !important;
}

/* Core Web Vitals */
body .ws-page .ws-scene-seo__vitals-title {
  font-size: 10px !important; font-weight: 600 !important; color: var(--ws-ink) !important;
  margin-bottom: 8px !important;
}
body .ws-page .ws-scene-seo__vitals {
  display: flex !important; gap: 10px !important; margin-bottom: 14px !important;
}
body .ws-page .ws-scene-seo__vital {
  flex: 1 !important; text-align: center !important;
  background: #fafafa !important; border: 1px solid #f0f0f0 !important;
  border-radius: 10px !important; padding: 10px 6px !important;
}
body .ws-page .ws-scene-seo__vital-ring {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 5px !important; border: 3px solid transparent !important;
}
body .ws-page .ws-scene-seo__vital-ring--green {
  border-color: #10b981 !important; background: rgba(16,185,129,.06) !important;
}
body .ws-page .ws-scene-seo__vital-ring span {
  font-size: 9px !important; font-weight: 700 !important; color: #10b981 !important;
}
body .ws-page .ws-scene-seo__vital-name {
  font-size: 9px !important; font-weight: 600 !important; color: #888 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
}

/* Keyword rankings table */
body .ws-page .ws-scene-seo__keywords {
  margin-bottom: 12px !important; background: var(--ws-white) !important;
  border: 1px solid #f0f0f0 !important; border-radius: 10px !important;
  overflow: hidden !important;
}
body .ws-page .ws-scene-seo__kw-header {
  display: flex !important; padding: 6px 10px !important; background: #fafafa !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
body .ws-page .ws-scene-seo__kw-header span {
  font-size: 8px !important; font-weight: 600 !important; color: #aaa !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
}
body .ws-page .ws-scene-seo__kw-header span:first-child { flex: 1 !important; }
body .ws-page .ws-scene-seo__kw-header span:nth-child(2) { width: 50px !important; text-align: center !important; }
body .ws-page .ws-scene-seo__kw-header span:nth-child(3) { width: 40px !important; text-align: right !important; }

body .ws-page .ws-scene-seo__kw-row {
  display: flex !important; padding: 6px 10px !important; align-items: center !important;
  border-bottom: 1px solid #f8f8f8 !important;
}
body .ws-page .ws-scene-seo__kw-row:last-child { border-bottom: none !important; }
body .ws-page .ws-scene-seo__kw-row span:first-child {
  flex: 1 !important; font-size: 10px !important; color: var(--ws-ink) !important;
  font-weight: 500 !important;
}
body .ws-page .ws-scene-seo__kw-pos {
  width: 50px !important; text-align: center !important;
  font-size: 11px !important; font-weight: 800 !important; color: var(--ws-orange) !important;
}
body .ws-page .ws-scene-seo__kw-up {
  width: 40px !important; text-align: right !important;
  font-size: 10px !important; font-weight: 700 !important; color: #10b981 !important;
}

/* Lighthouse scores */
body .ws-page .ws-scene-seo__scores { display: flex !important; gap: 8px !important; }
body .ws-page .ws-scene-seo__score {
  flex: 1 !important; text-align: center !important; padding: 8px 6px !important;
  background: var(--ws-white) !important; border: 1px solid #f0f0f0 !important; border-radius: 10px !important;
}
body .ws-page .ws-scene-seo__score strong {
  display: block !important; font-size: 20px !important; font-weight: 800 !important; color: #10b981 !important;
}
body .ws-page .ws-scene-seo__score span { font-size: 9px !important; color: var(--ws-muted) !important; }

/* --- RIGHT: Accordion List --- */
body .ws-page .ws-showcase__list {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}

body .ws-page .ws-showcase__item {
  border-bottom: 1px solid #eee !important;
  overflow: hidden !important;
  transition: background .3s ease !important;
}
body .ws-page .ws-showcase__item:first-child { border-top: 1px solid #eee !important; }

body .ws-page .ws-showcase__item--active {
  background: rgba(198,104,45,.03) !important;
}

body .ws-page .ws-showcase__trigger {
  display: flex !important; align-items: center !important; gap: 14px !important;
  width: 100% !important; padding: 20px 16px !important;
  background: none !important; border: none !important; cursor: pointer !important;
  text-align: left !important; font-family: inherit !important;
  transition: all .3s ease !important;
  position: relative !important;
}

body .ws-page .ws-showcase__item--active .ws-showcase__trigger::before {
  content: '' !important; position: absolute !important;
  left: 0 !important; top: 12px !important; bottom: 12px !important; width: 3px !important;
  background: linear-gradient(to bottom, var(--ws-orange), var(--ws-orange-light)) !important;
  border-radius: 0 2px 2px 0 !important;
}

body .ws-page .ws-showcase__trigger-icon {
  width: 42px !important; height: 42px !important; flex-shrink: 0 !important;
  background: var(--ws-light-bg) !important; border-radius: 11px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .3s ease !important;
}
body .ws-page .ws-showcase__trigger-icon svg { width: 20px !important; height: 20px !important; stroke: var(--ws-muted) !important; fill: none !important; }

body .ws-page .ws-showcase__item--active .ws-showcase__trigger-icon {
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light)) !important;
}
body .ws-page .ws-showcase__item--active .ws-showcase__trigger-icon svg { stroke: #fff !important; }

body .ws-page .ws-showcase__trigger-title {
  flex: 1 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ws-ink) !important;
}
body .ws-page .ws-showcase__item--active .ws-showcase__trigger-title { color: var(--ws-orange) !important; }

body .ws-page .ws-showcase__trigger-arrow {
  transition: transform .3s ease !important; color: var(--ws-muted) !important;
  width: 16px !important; height: 16px !important;
}
body .ws-page .ws-showcase__item--active .ws-showcase__trigger-arrow {
  transform: rotate(180deg) !important; color: var(--ws-orange) !important;
}

body .ws-page .ws-showcase__body {
  max-height: 0 !important; overflow: hidden !important;
  transition: max-height .4s ease, padding .4s ease !important;
  padding: 0 16px 0 72px !important;
}
body .ws-page .ws-showcase__item--active .ws-showcase__body {
  max-height: 260px !important;
  padding: 0 16px 20px 72px !important;
}

body .ws-page .ws-showcase__desc {
  font-size: 14px !important; color: var(--ws-muted) !important; line-height: 1.7 !important; margin-bottom: 14px !important;
}

body .ws-page .ws-showcase__features li {
  display: flex !important; align-items: center !important; gap: 7px !important;
  font-size: 13px !important; color: #555 !important; padding: 4px 0 !important;
}
body .ws-page .ws-showcase__features li svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }


/* ==========================================================================
   SECTION 3 — WHY CHOOSE US (COMPARISON ARENA)
   ========================================================================== */
body .ws-page .ws-arena {
  background: #f8f9fb !important;
  position: relative !important;
  color: var(--ws-dark) !important;
  padding: 80px 0 60px !important;
}
body .ws-page .ws-arena__heading {
  text-align: center !important; margin-bottom: 40px !important;
}
body .ws-page .ws-arena__title {
  font-size: clamp(28px, 4vw, 44px) !important; font-weight: 800 !important;
  color: var(--ws-dark) !important; letter-spacing: -.02em !important;
  margin: 12px 0 0 !important;
}

/* --- Play area: holds round cards stacked --- */
body .ws-page .ws-arena__play {
  position: relative !important;
  min-height: 280px !important;
  margin-bottom: 32px !important;
}

/* --- Rounds --- */
body .ws-page .ws-arena__round {
  position: absolute !important; inset: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}
body .ws-page .ws-arena__round.is-visible { opacity: 1 !important; }
body .ws-page .ws-arena__round.is-exit { opacity: 0 !important; }
body .ws-page .ws-arena__round.is-done { display: none !important; }

/* Round HUD */
body .ws-page .ws-arena__round-hud {
  display: flex !important; align-items: baseline !important; gap: 4px !important;
  margin-bottom: 6px !important;
  opacity: 0 !important; transform: translateY(-10px) !important;
  transition: all 0.3s ease !important;
}
body .ws-page .ws-arena__round.is-visible .ws-arena__round-hud {
  opacity: 1 !important; transform: translateY(0) !important;
}
body .ws-page .ws-arena__round-num {
  font-size: 32px !important; font-weight: 900 !important;
  color: var(--ws-orange) !important; line-height: 1 !important;
}
body .ws-page .ws-arena__round-of {
  font-size: 15px !important; color: #aaa !important;
}

/* Topic */
body .ws-page .ws-arena__round-topic {
  font-size: clamp(20px, 3vw, 32px) !important; font-weight: 800 !important;
  color: var(--ws-dark) !important; text-align: center !important;
  margin-bottom: 28px !important;
  opacity: 0 !important; transform: translateY(12px) !important;
  transition: all 0.4s ease 0.08s !important;
}
body .ws-page .ws-arena__round.is-visible .ws-arena__round-topic {
  opacity: 1 !important; transform: translateY(0) !important;
}

/* Stage */
body .ws-page .ws-arena__stage {
  display: flex !important; align-items: stretch !important;
  gap: 20px !important; max-width: 700px !important;
  width: 100% !important; justify-content: center !important;
}

/* Cards */
body .ws-page .ws-arena__card {
  flex: 1 !important; padding: 28px 24px !important;
  border-radius: 14px !important; text-align: center !important;
  position: relative !important;
  transition: all 0.45s cubic-bezier(.22,1,.36,1) !important;
}
body .ws-page .ws-arena__card--left {
  background: #fff !important;
  border: 1px solid #e8e8ec !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
  opacity: 0 !important; transform: translateX(-50px) !important;
}
body .ws-page .ws-arena__card--right {
  background: #fff !important;
  border: 1px solid rgba(198,104,45,.2) !important;
  box-shadow: 0 3px 16px rgba(198,104,45,.06) !important;
  opacity: 0 !important; transform: translateX(50px) !important;
}
body .ws-page .ws-arena__round.is-cards-in .ws-arena__card--left,
body .ws-page .ws-arena__round.is-cards-in .ws-arena__card--right {
  opacity: 1 !important; transform: translateX(0) !important;
}
body .ws-page .ws-arena__round.is-judged .ws-arena__card--left {
  transform: scale(.95) !important; opacity: .45 !important;
  border-color: #fecaca !important; background: #fef2f2 !important;
}
body .ws-page .ws-arena__round.is-judged .ws-arena__card--right {
  transform: scale(1.03) translateY(-3px) !important;
  box-shadow: 0 6px 28px rgba(198,104,45,.14) !important;
  border-color: var(--ws-orange) !important;
}

/* Card badge */
body .ws-page .ws-arena__card-badge {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .12em !important;
  margin-bottom: 16px !important;
}
body .ws-page .ws-arena__card--left .ws-arena__card-badge { color: #aaa !important; }
body .ws-page .ws-arena__card--right .ws-arena__card-badge { color: var(--ws-orange) !important; }

/* Card text */
body .ws-page .ws-arena__card-text {
  font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important;
}
body .ws-page .ws-arena__card--left .ws-arena__card-text { color: #888 !important; }
body .ws-page .ws-arena__card--right .ws-arena__card-text { color: var(--ws-dark) !important; }

/* Stamps */
body .ws-page .ws-arena__card-stamp {
  position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 14px !important;
  opacity: 0 !important; transform: scale(0.5) !important;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
body .ws-page .ws-arena__card-stamp--x { background: rgba(239,68,68,.05) !important; }
body .ws-page .ws-arena__card-stamp--x svg { stroke: #ef4444 !important; }
body .ws-page .ws-arena__card-stamp--check { background: rgba(16,185,129,.05) !important; }
body .ws-page .ws-arena__card-stamp--check svg { stroke: #10b981 !important; }
body .ws-page .ws-arena__round.is-judged .ws-arena__card-stamp {
  opacity: 1 !important; transform: scale(1) !important;
}

/* VS badge */
body .ws-page .ws-arena__vs-badge {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: var(--ws-orange) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important; font-weight: 900 !important; color: #fff !important;
  flex-shrink: 0 !important; align-self: center !important;
  box-shadow: 0 3px 12px rgba(198,104,45,.2) !important;
  opacity: 0 !important; transform: scale(0) !important;
  transition: all 0.35s cubic-bezier(.34,1.56,.64,1) 0.1s !important;
}
body .ws-page .ws-arena__round.is-cards-in .ws-arena__vs-badge {
  opacity: 1 !important; transform: scale(1) !important;
}

/* --- Two-column comparison cards --- */
body .ws-page .ws-arena__columns {
  display: flex !important; gap: 24px !important;
  max-width: 820px !important; margin: 0 auto !important;
}

/* Column cards */
body .ws-page .ws-arena__col {
  flex: 1 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
  transition: box-shadow 0.6s ease, border-color 0.6s ease, transform 0.6s ease !important;
}
body .ws-page .ws-arena__col--left {
  background: #fff !important;
  border: 1px solid #e8e8ec !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
body .ws-page .ws-arena__col--right {
  background: #fff !important;
  border: 1px solid rgba(198,104,45,.15) !important;
  box-shadow: 0 2px 16px rgba(198,104,45,.06) !important;
}
body .ws-page .ws-arena__columns.is-complete .ws-arena__col--left {
  opacity: .7 !important; transform: scale(.98) !important;
}
body .ws-page .ws-arena__columns.is-complete .ws-arena__col--right {
  box-shadow: 0 8px 40px rgba(198,104,45,.15) !important;
  border-color: var(--ws-orange) !important;
  transform: scale(1.01) !important;
}

/* Column header */
body .ws-page .ws-arena__col-head {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 16px 20px !important;
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
}
body .ws-page .ws-arena__col--left .ws-arena__col-head {
  background: #fafafa !important; color: #999 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
body .ws-page .ws-arena__col--left .ws-arena__col-head svg { stroke: #ccc !important; }
body .ws-page .ws-arena__col--right .ws-arena__col-head {
  background: linear-gradient(135deg, #fff8f2, #fff) !important;
  color: var(--ws-orange) !important;
  border-bottom: 1px solid rgba(198,104,45,.1) !important;
}
body .ws-page .ws-arena__col--right .ws-arena__col-head svg { stroke: var(--ws-orange) !important; }

/* Column body */
body .ws-page .ws-arena__col-body {
  flex: 1 !important; padding: 4px 0 !important;
  min-height: 60px !important;
}

/* Column items — hidden, slide in when revealed */
body .ws-page .ws-arena__col-item {
  padding: 0 20px !important;
  max-height: 0 !important; opacity: 0 !important;
  overflow: hidden !important;
  transition: all 0.45s cubic-bezier(.22,1,.36,1) !important;
  border-bottom: 1px solid transparent !important;
}
body .ws-page .ws-arena__col-item.is-revealed {
  max-height: 64px !important;
  padding: 12px 20px !important;
  opacity: 1 !important;
  border-bottom-color: #f5f5f5 !important;
}
body .ws-page .ws-arena__col-item:last-child.is-revealed {
  border-bottom-color: transparent !important;
}
body .ws-page .ws-arena__col-topic {
  display: block !important;
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  margin-bottom: 3px !important;
}
body .ws-page .ws-arena__col--left .ws-arena__col-topic { color: #bbb !important; }
body .ws-page .ws-arena__col--right .ws-arena__col-topic { color: var(--ws-orange) !important; }
body .ws-page .ws-arena__col-val {
  display: block !important;
  font-size: 14px !important; font-weight: 600 !important;
  line-height: 1.3 !important;
}
body .ws-page .ws-arena__col--left .ws-arena__col-val { color: #999 !important; }
body .ws-page .ws-arena__col--right .ws-arena__col-val { color: var(--ws-dark) !important; }

/* Column score footer */
body .ws-page .ws-arena__col-score {
  padding: 14px 20px !important;
  display: flex !important; align-items: baseline !important; gap: 3px !important;
  border-top: 1px solid #f0f0f0 !important;
  opacity: 0 !important; transform: translateY(8px) !important;
  transition: all 0.5s ease !important;
}
body .ws-page .ws-arena__columns.is-complete .ws-arena__col-score {
  opacity: 1 !important; transform: translateY(0) !important;
}
body .ws-page .ws-arena__col-score-num {
  font-size: 28px !important; font-weight: 900 !important;
}
body .ws-page .ws-arena__col--left .ws-arena__col-score-num { color: #ddd !important; }
body .ws-page .ws-arena__col--right .ws-arena__col-score-num { color: var(--ws-orange) !important; }
body .ws-page .ws-arena__col-score-of {
  font-size: 14px !important; color: #aaa !important; font-weight: 500 !important;
}

/* --- Finale --- */
body .ws-page .ws-arena__finale {
  max-height: 0 !important; opacity: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  transition: all 0.7s cubic-bezier(.22,1,.36,1) !important;
}
body .ws-page .ws-arena__finale.is-visible {
  max-height: 200px !important; opacity: 1 !important;
  padding-top: 36px !important;
}
body .ws-page .ws-arena__finale-msg {
  font-size: 17px !important; color: #666 !important;
  margin: 0 0 20px !important; font-weight: 500 !important;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  body .ws-page .ws-arena__stage { flex-direction: column !important; gap: 14px !important; }
  body .ws-page .ws-arena__card { padding: 22px 18px !important; }
  body .ws-page .ws-arena__card-text { font-size: 14px !important; }
  body .ws-page .ws-arena__vs-badge { width: 34px !important; height: 34px !important; font-size: 10px !important; }
  body .ws-page .ws-arena__round-topic { font-size: 18px !important; margin-bottom: 18px !important; }
  body .ws-page .ws-arena__columns { flex-direction: column !important; gap: 16px !important; }
  body .ws-page .ws-arena__col-val { font-size: 13px !important; }
  body .ws-page .ws-arena__play { min-height: 320px !important; }
}


/* ==========================================================================
   SECTION 4 — STATS
   ========================================================================== */
body .ws-page .ws-stats {
  padding: 80px 0 !important;
  background: #fff !important;
}
body .ws-page .ws-stats__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}

/* Stat card */
body .ws-page .ws-stat {
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 20px !important;
  padding: 32px 20px 28px !important;
  text-align: center !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s ease var(--stat-delay, 0s),
              transform 0.6s cubic-bezier(.22,1,.36,1) var(--stat-delay, 0s),
              box-shadow 0.3s ease, border-color 0.3s ease !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
body .ws-page .ws-stat.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
body .ws-page .ws-stat:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.08) !important;
  border-color: var(--stat-color, #eee) !important;
}

/* Icon */
body .ws-page .ws-stat__icon {
  margin-bottom: 16px !important;
}
body .ws-page .ws-stat__icon svg {
  stroke: var(--stat-color) !important;
  width: 28px !important; height: 28px !important;
}

/* Ring */
body .ws-page .ws-stat__ring {
  position: relative !important;
  width: 130px !important; height: 130px !important;
  margin: 0 auto 16px !important;
}
body .ws-page .ws-stat__ring-svg {
  width: 100% !important; height: 100% !important;
  transform: rotate(-90deg) !important;
}
body .ws-page .ws-stat__ring-bg {
  fill: none !important;
  stroke: #f3f3f3 !important;
  stroke-width: 6 !important;
}
body .ws-page .ws-stat__ring-fill {
  fill: none !important;
  stroke: var(--stat-color) !important;
  stroke-width: 6 !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1) !important;
}

/* Value centered inside ring */
body .ws-page .ws-stat__value {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body .ws-page .ws-stat__number {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--ws-dark) !important;
  line-height: 1 !important;
  display: inline !important;
}
body .ws-page .ws-stat__suffix {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--stat-color) !important;
  display: inline !important;
}
body .ws-page .ws-stat__label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #888 !important;
  letter-spacing: .02em !important;
}


/* ==========================================================================
   SECTION 5 — PROCESS (Vertical Timeline)
   ========================================================================== */
body .ws-page .ws-process {
  padding: 100px 0 120px !important;
  background: linear-gradient(180deg, #faf8f5 0%, #fff 100%) !important;
  overflow: hidden !important;
  position: relative !important;
}

body .ws-page .ws-timeline {
  position: relative !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 40px 0 0 !important;
}

body .ws-page .ws-timeline__line {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  transform: translateX(-50%) !important;
  background: #e8e0d8 !important;
  border-radius: 3px !important;
}

body .ws-page .ws-timeline__line-fill {
  width: 100% !important;
  height: 0% !important;
  background: linear-gradient(180deg, var(--ws-orange), var(--ws-orange-light)) !important;
  border-radius: 3px !important;
  transition: height 0.1s linear !important;
}

body .ws-page .ws-timeline__item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 60px !important;
  opacity: 0 !important;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,1,.36,1) !important;
}

body .ws-page .ws-timeline__item:last-child {
  margin-bottom: 0 !important;
}

body .ws-page .ws-timeline__item--left {
  flex-direction: row !important;
  padding-right: calc(50% + 40px) !important;
  transform: translateX(-60px) !important;
}

body .ws-page .ws-timeline__item--right {
  flex-direction: row-reverse !important;
  padding-left: calc(50% + 40px) !important;
  transform: translateX(60px) !important;
}

body .ws-page .ws-timeline__item.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

body .ws-page .ws-timeline__dot {
  position: absolute !important;
  left: 50% !important;
  top: 24px !important;
  width: 56px !important;
  height: 56px !important;
  transform: translateX(-50%) scale(0) !important;
  background: linear-gradient(135deg, var(--ws-orange), #e8823a) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(198,104,45,.15), 0 8px 24px rgba(198,104,45,.25) !important;
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1) !important;
}

body .ws-page .ws-timeline__item.is-visible .ws-timeline__dot {
  transform: translateX(-50%) scale(1) !important;
}

body .ws-page .ws-timeline__dot span {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}

body .ws-page .ws-timeline__card {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03) !important;
  position: relative !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
  width: 100% !important;
}

body .ws-page .ws-timeline__card::before {
  content: '' !important;
  position: absolute !important;
  top: 28px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  transform: rotate(45deg) !important;
  z-index: -1 !important;
}

body .ws-page .ws-timeline__item--left .ws-timeline__card::before {
  right: -10px !important;
  border-left: none !important;
  border-bottom: none !important;
}

body .ws-page .ws-timeline__item--right .ws-timeline__card::before {
  left: -10px !important;
  border-right: none !important;
  border-top: none !important;
}

body .ws-page .ws-timeline__card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(198,104,45,.12), 0 4px 12px rgba(0,0,0,.04) !important;
  border-color: rgba(198,104,45,.2) !important;
}

body .ws-page .ws-timeline__card-icon {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, rgba(198,104,45,.1), rgba(198,104,45,.05)) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
}

body .ws-page .ws-timeline__card:hover .ws-timeline__card-icon {
  background: linear-gradient(135deg, var(--ws-orange), #e8823a) !important;
  transform: scale(1.08) !important;
}

body .ws-page .ws-timeline__card-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke: var(--ws-orange) !important;
  fill: none !important;
  transition: stroke 0.3s ease !important;
}

body .ws-page .ws-timeline__card:hover .ws-timeline__card-icon svg {
  stroke: #fff !important;
}

body .ws-page .ws-timeline__card-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ws-ink) !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

body .ws-page .ws-timeline__card-desc {
  font-size: 14px !important;
  color: var(--ws-muted) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Timeline mobile */
@media (max-width: 768px) {
  body .ws-page .ws-timeline__line {
    left: 28px !important;
    transform: none !important;
  }
  body .ws-page .ws-timeline__item--left,
  body .ws-page .ws-timeline__item--right {
    flex-direction: row !important;
    padding-right: 0 !important;
    padding-left: 72px !important;
  }
  body .ws-page .ws-timeline__item--left { transform: translateX(-40px) !important; }
  body .ws-page .ws-timeline__item--right { transform: translateX(-40px) !important; }
  body .ws-page .ws-timeline__dot {
    left: 28px !important;
    width: 44px !important;
    height: 44px !important;
  }
  body .ws-page .ws-timeline__dot span { font-size: 16px !important; }
  body .ws-page .ws-timeline__card { padding: 24px 20px !important; border-radius: 16px !important; }
  body .ws-page .ws-timeline__item--left .ws-timeline__card::before,
  body .ws-page .ws-timeline__item--right .ws-timeline__card::before {
    left: -10px !important;
    right: auto !important;
    border-right: none !important;
    border-top: none !important;
    border-left: 1px solid rgba(0,0,0,.06) !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }
  body .ws-page .ws-timeline__card-title { font-size: 17px !important; }
  body .ws-page .ws-timeline__card-desc { font-size: 13px !important; }
}


/* ==========================================================================
   SECTION 6 — TECH (Infinite Marquee)
   ========================================================================== */
body .ws-page .ws-tech {
  padding: 100px 0 100px !important;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
  overflow: visible !important;
  position: relative !important;
}

body .ws-page .ws-tech .ws-section-tag {
  color: rgba(255,255,255,.5) !important;
  border-color: rgba(255,255,255,.15) !important;
}

body .ws-page .ws-tech .ws-section-title {
  color: #fff !important;
}

body .ws-page .ws-tech .ws-section-desc {
  color: rgba(255,255,255,.55) !important;
}

body .ws-page .ws-tech__marquee-wrap {
  margin-top: 50px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
}

body .ws-page .ws-tech__marquee {
  overflow: hidden !important;
  width: 100% !important;
}

body .ws-page .ws-tech__marquee-track {
  display: flex !important;
  gap: 20px !important;
  width: max-content !important;
}

body .ws-page .ws-tech__marquee--left .ws-tech__marquee-track {
  animation: wsTechScrollLeft 35s linear infinite !important;
}

body .ws-page .ws-tech__marquee--right .ws-tech__marquee-track {
  animation: wsTechScrollRight 40s linear infinite !important;
}

body .ws-page .ws-tech__marquee:hover .ws-tech__marquee-track {
  animation-play-state: paused !important;
}

@keyframes wsTechScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

@keyframes wsTechScrollRight {
  0% { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}

body .ws-page .ws-tech__chip {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 28px 16px 18px !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 60px !important;
  white-space: nowrap !important;
  transition: all 0.4s ease !important;
  cursor: default !important;
  flex-shrink: 0 !important;
}

body .ws-page .ws-tech__chip:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(198,104,45,.4) !important;
  box-shadow: 0 0 30px rgba(198,104,45,.15), 0 0 60px rgba(198,104,45,.05) !important;
  transform: scale(1.06) !important;
}

body .ws-page .ws-tech__chip-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.3s ease !important;
}

body .ws-page .ws-tech__chip:hover .ws-tech__chip-icon {
  background: rgba(255,255,255,.15) !important;
}

body .ws-page .ws-tech__chip-icon svg {
  width: 28px !important;
  height: 28px !important;
}

body .ws-page .ws-tech__chip-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.85) !important;
  letter-spacing: 0.3px !important;
}

body .ws-page .ws-tech__chip:hover .ws-tech__chip-name {
  color: #fff !important;
}


/* ==========================================================================
   SECTION 7 — PORTFOLIO (Live iframe previews)
   ========================================================================== */
body .ws-page .ws-portfolio {
  padding: 120px 0 !important;
  background: var(--ws-white) !important;
}

body .ws-page .ws-portfolio__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
}

body .ws-page .ws-pf-item {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
  display: block !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease, border-color 0.4s ease !important;
}

body .ws-page .ws-pf-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.12) !important;
  border-color: rgba(198,104,45,.2) !important;
}

body .ws-page .ws-pf-item__browser {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: #f5f5f7 !important;
  border-bottom: 1px solid #e8e8ea !important;
}

body .ws-page .ws-pf-item__browser-dots {
  display: flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

body .ws-page .ws-pf-item__browser-dots span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: block !important;
}

body .ws-page .ws-pf-item__browser-dots span:nth-child(1) { background: #ff5f57 !important; }
body .ws-page .ws-pf-item__browser-dots span:nth-child(2) { background: #ffbd2e !important; }
body .ws-page .ws-pf-item__browser-dots span:nth-child(3) { background: #28c840 !important; }

body .ws-page .ws-pf-item__browser-url {
  flex: 1 !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #999 !important;
  background: #fff !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  border: 1px solid #e8e8ea !important;
  letter-spacing: 0.3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .ws-page .ws-pf-item__iframe-wrap {
  width: 100% !important;
  height: 340px !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 16 / 10 !important;
}

body .ws-page .ws-pf-item__iframe-wrap iframe {
  width: 1440px !important;
  height: 900px !important;
  border: none !important;
  transform-origin: top left !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

body .ws-page .ws-pf-item__screenshot {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  transition: object-position 5s cubic-bezier(.22,1,.36,1), transform 0.5s ease !important;
}

@media (hover: hover) {
  body .ws-page .ws-pf-item:hover .ws-pf-item__screenshot {
    object-position: bottom center !important;
    transform: scale(1.015) !important;
  }
}

body .ws-page .ws-pf-item__overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 32px 28px !important;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, transparent 100%) !important;
  transform: translateY(20px) !important;
  opacity: 0 !important;
  transition: all .4s cubic-bezier(.22,1,.36,1) !important;
}

body .ws-page .ws-pf-item:hover .ws-pf-item__overlay {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

body .ws-page .ws-pf-item__cat {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ws-orange-light) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}

body .ws-page .ws-pf-item__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

body .ws-page .ws-pf-item__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: gap 0.3s ease !important;
}

body .ws-page .ws-pf-item__link svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform .3s ease !important;
}

body .ws-page .ws-pf-item:hover .ws-pf-item__link svg {
  transform: translate(3px, -3px) !important;
}

@media (max-width: 768px) {
  body .ws-page .ws-portfolio__grid {
    grid-template-columns: 1fr !important;
  }
  body .ws-page .ws-pf-item__iframe-wrap {
    height: 260px !important;
  }
  body .ws-page .ws-pf-item__iframe-wrap iframe {
    width: 1200px !important;
    height: 750px !important;
    transform: scale(0.30) !important;
  }
}


/* ==========================================================================
   SECTION 8 — PRICING
   ========================================================================== */
body .ws-page .ws-pricing {
  padding: 120px 0 !important;
  background: var(--ws-light-bg) !important;
}

body .ws-page .ws-pricing__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important; align-items: start !important;
}

body .ws-page .ws-pcard {
  position: relative !important;
  padding: 44px 32px !important;
  background: var(--ws-white) !important;
  border-radius: 20px !important;
  border: 1px solid #eee !important;
  transition: all .4s var(--ws-ease) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body .ws-page .ws-pcard:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.07) !important;
}

body .ws-page .ws-pcard--featured {
  background: var(--ws-ink) !important;
  border-color: transparent !important;
  transform: scale(1.03) !important;
  z-index: 2 !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.14) !important;
}
body .ws-page .ws-pcard--featured:hover { transform: scale(1.03) translateY(-5px) !important; }

body .ws-page .ws-pcard__badge {
  position: absolute !important; top: -13px !important; left: 50% !important; transform: translateX(-50%) !important;
  padding: 7px 22px !important;
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light)) !important;
  color: #fff !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  border-radius: var(--ws-radius-pill) !important; white-space: nowrap !important;
}

body .ws-page .ws-pcard__name { font-size: 22px !important; font-weight: 700 !important; color: var(--ws-ink) !important; margin-bottom: 4px !important; line-height: 1.3 !important; }
body .ws-page .ws-pcard--featured .ws-pcard__name { color: #fff !important; }

body .ws-page .ws-pcard__tagline { font-size: 13px !important; color: var(--ws-muted) !important; margin-bottom: 20px !important; }
body .ws-page .ws-pcard--featured .ws-pcard__tagline { color: rgba(255,255,255,.45) !important; }

body .ws-page .ws-pcard__price { display: flex !important; align-items: flex-start !important; gap: 2px !important; margin-bottom: 6px !important; position: relative !important; }
body .ws-page .ws-pcard__from {
  position: absolute !important; top: -14px !important; left: 0 !important;
  font-size: 11px !important; font-weight: 500 !important; color: var(--ws-muted) !important; text-transform: uppercase !important;
}
body .ws-page .ws-pcard--featured .ws-pcard__from { color: rgba(255,255,255,.35) !important; }
body .ws-page .ws-pcard__currency { font-size: 26px !important; font-weight: 700 !important; color: var(--ws-ink) !important; margin-top: 6px !important; }
body .ws-page .ws-pcard--featured .ws-pcard__currency { color: #fff !important; }
body .ws-page .ws-pcard__amount { font-size: 48px !important; font-weight: 800 !important; color: var(--ws-ink) !important; line-height: 1 !important; }
body .ws-page .ws-pcard--featured .ws-pcard__amount { color: #fff !important; }

body .ws-page .ws-pcard__divider {
  width: 48px !important; height: 3px !important;
  background: linear-gradient(90deg, var(--ws-orange), var(--ws-orange-light)) !important;
  border-radius: 2px !important; margin: 20px 0 !important;
}

body .ws-page .ws-pcard__features { margin-bottom: 28px !important; }
body .ws-page .ws-pcard__features li {
  display: flex !important; align-items: center !important; gap: 9px !important;
  font-size: 14px !important; color: #555 !important; padding: 9px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
}
body .ws-page .ws-pcard--featured .ws-pcard__features li {
  color: rgba(255,255,255,.65) !important; border-bottom-color: rgba(255,255,255,.07) !important;
}
body .ws-page .ws-pcard__features li:last-child { border-bottom: none !important; }
body .ws-page .ws-pcard__features li svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }

body .ws-page .ws-pcard__cta {
  display: block !important; text-align: center !important;
  padding: 14px 28px !important;
  background: var(--ws-orange) !important; color: #fff !important;
  font-size: 14px !important; font-weight: 600 !important;
  border-radius: var(--ws-radius-pill) !important;
  transition: all .35s var(--ws-ease) !important;
}
body .ws-page .ws-pcard__cta:hover {
  background: var(--ws-orange-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(198,104,45,.28) !important;
  color: #fff !important;
}
body .ws-page .ws-pcard--featured .ws-pcard__cta { background: #fff !important; color: var(--ws-ink) !important; }
body .ws-page .ws-pcard--featured .ws-pcard__cta:hover { background: var(--ws-orange) !important; color: #fff !important; }


/* ==========================================================================
   SECTION 9 — FAQ (Split Layout)
   ========================================================================== */
body .ws-page .ws-faq {
  padding: 120px 0 !important;
  background: linear-gradient(180deg, #fff 0%, #faf8f5 100%) !important;
}

body .ws-page .ws-faq__split {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  gap: 60px !important;
  align-items: start !important;
}

body .ws-page .ws-faq__left {
  position: sticky !important;
  top: 120px !important;
}

body .ws-page .ws-faq__heading {
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--ws-ink) !important;
  margin: 16px 0 20px !important;
  letter-spacing: -0.5px !important;
}

body .ws-page .ws-faq__heading-accent {
  background: linear-gradient(135deg, var(--ws-orange), #e8823a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

body .ws-page .ws-faq__intro {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ws-muted) !important;
  margin-bottom: 32px !important;
}

body .ws-page .ws-faq__contact-card {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.04) !important;
}

body .ws-page .ws-faq__contact-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(198,104,45,.1), rgba(198,104,45,.05)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .ws-page .ws-faq__contact-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: var(--ws-orange) !important;
}

body .ws-page .ws-faq__contact-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ws-ink) !important;
  margin-bottom: 4px !important;
}

body .ws-page .ws-faq__contact-desc {
  font-size: 13px !important;
  color: var(--ws-muted) !important;
  line-height: 1.6 !important;
}

body .ws-page .ws-faq__contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, var(--ws-orange), #e8823a) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(198,104,45,.25) !important;
}

body .ws-page .ws-faq__contact-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(198,104,45,.35) !important;
}

body .ws-page .ws-faq__right {
  min-width: 0 !important;
}

body .ws-page .ws-faq__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body .ws-page .ws-faq__item {
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  background: #fff !important;
}

body .ws-page .ws-faq__item:hover {
  border-color: rgba(198,104,45,.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
}

body .ws-page .ws-faq__item--active {
  border-color: rgba(198,104,45,.25) !important;
  box-shadow: 0 8px 28px rgba(198,104,45,.08) !important;
}

body .ws-page .ws-faq__q {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 20px 24px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  transition: background 0.3s ease !important;
}

body .ws-page .ws-faq__num {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(198,104,45,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ws-orange) !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}

body .ws-page .ws-faq__item--active .ws-faq__num {
  background: linear-gradient(135deg, var(--ws-orange), #e8823a) !important;
  color: #fff !important;
}

body .ws-page .ws-faq__q-text {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ws-ink) !important;
  line-height: 1.4 !important;
  transition: color 0.3s ease !important;
}

body .ws-page .ws-faq__item--active .ws-faq__q-text {
  color: var(--ws-orange) !important;
}

body .ws-page .ws-faq__icon {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), background 0.3s ease !important;
}

body .ws-page .ws-faq__icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: var(--ws-muted) !important;
  transition: stroke 0.3s ease !important;
}

body .ws-page .ws-faq__item--active .ws-faq__icon {
  transform: rotate(45deg) !important;
  background: rgba(198,104,45,.1) !important;
}

body .ws-page .ws-faq__item--active .ws-faq__icon svg {
  stroke: var(--ws-orange) !important;
}

body .ws-page .ws-faq__a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(.22,1,.36,1) !important;
}

body .ws-page .ws-faq__item--active .ws-faq__a {
  max-height: 300px !important;
}

body .ws-page .ws-faq__a p {
  padding: 0 24px 22px 76px !important;
  font-size: 14px !important;
  color: var(--ws-muted) !important;
  line-height: 1.8 !important;
}

@media (max-width: 900px) {
  body .ws-page .ws-faq__split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  body .ws-page .ws-faq__left {
    position: static !important;
  }
  body .ws-page .ws-faq__heading {
    font-size: 32px !important;
  }
  body .ws-page .ws-faq__a p {
    padding-left: 24px !important;
  }
}


/* ==========================================================================
   SECTION 10 — FINAL CTA
   ========================================================================== */
body .ws-page .ws-cta {
  position: relative !important;
  min-height: 65vh !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
}

body .ws-page .ws-cta__gradient {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(135deg, var(--ws-orange), var(--ws-orange-light), #e07028) !important;
  background-size: 300% 300% !important;
  animation: wsCTAGrad 10s ease infinite !important;
}
@keyframes wsCTAGrad { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

body .ws-page .ws-cta__pattern {
  position: absolute !important; inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

body .ws-page .ws-cta__particles {
  position: absolute !important; inset: 0 !important; pointer-events: none !important;
}
body .ws-page .ws-cta__particles span {
  position: absolute !important; width: 5px !important; height: 5px !important;
  background: rgba(255,255,255,.25) !important; border-radius: 50% !important;
  animation: wsParticle 12s linear infinite !important;
}
body .ws-page .ws-cta__particles span:nth-child(1){left:8% !important;animation-delay:0s !important;animation-duration:13s !important}
body .ws-page .ws-cta__particles span:nth-child(2){left:22% !important;animation-delay:2s !important;animation-duration:15s !important;width:4px !important;height:4px !important}
body .ws-page .ws-cta__particles span:nth-child(3){left:38% !important;animation-delay:4s !important;animation-duration:12s !important}
body .ws-page .ws-cta__particles span:nth-child(4){left:52% !important;animation-delay:1s !important;animation-duration:16s !important;width:7px !important;height:7px !important}
body .ws-page .ws-cta__particles span:nth-child(5){left:68% !important;animation-delay:3s !important;animation-duration:14s !important}
body .ws-page .ws-cta__particles span:nth-child(6){left:82% !important;animation-delay:5s !important;animation-duration:13s !important;width:4px !important;height:4px !important}
body .ws-page .ws-cta__particles span:nth-child(7){left:92% !important;animation-delay:.5s !important;animation-duration:11s !important}

@keyframes wsParticle {
  0%{bottom:-5%;opacity:0} 10%{opacity:.5} 90%{opacity:.5} 100%{bottom:105%;opacity:0}
}

body .ws-page .ws-cta__content {
  position: relative !important; z-index: 5 !important;
  text-align: center !important; max-width: 660px !important; padding: 0 40px !important;
}

body .ws-page .ws-cta__title {
  font-size: clamp(32px, 5.5vw, 56px) !important;
  font-weight: 800 !important; color: #fff !important;
  line-height: 1.12 !important; letter-spacing: -1px !important;
  margin-bottom: 18px !important;
}
body .ws-page .ws-cta__title em {
  font-style: normal !important;
  text-decoration: underline !important; text-decoration-color: rgba(255,255,255,.35) !important;
  text-underline-offset: 5px !important;
}

body .ws-page .ws-cta__desc {
  font-size: 18px !important; color: rgba(255,255,255,.85) !important;
  line-height: 1.6 !important; margin-bottom: 36px !important;
}

body .ws-page .ws-cta__buttons {
  display: flex !important; gap: 14px !important; justify-content: center !important; flex-wrap: wrap !important;
}

body .ws-page .ws-cta__btn {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 16px 32px !important; font-size: 15px !important; font-weight: 600 !important;
  border-radius: var(--ws-radius-pill) !important;
  transition: all .35s var(--ws-ease) !important;
  text-decoration: none !important;
}

body .ws-page .ws-cta__btn svg { width: 18px !important; height: 18px !important; }

body .ws-page .ws-cta__btn--white {
  background: #fff !important; color: var(--ws-ink) !important;
}
body .ws-page .ws-cta__btn--white:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.18) !important;
  color: var(--ws-ink) !important;
}

body .ws-page .ws-cta__btn--ghost {
  background: transparent !important; color: #fff !important;
  border: 2px solid rgba(255,255,255,.35) !important;
}
body .ws-page .ws-cta__btn--ghost:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: #fff !important; color: #fff !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  body .ws-page .ws-hero__inner { grid-template-columns: 1fr !important; gap: 48px !important; text-align: center !important; }
  body .ws-page .ws-hero__text { max-width: 100% !important; }
  body .ws-page .ws-hero__buttons { justify-content: center !important; }
  body .ws-page .ws-hero__mockup { max-width: 560px !important; margin: 0 auto !important; }
  body .ws-page .ws-laptop { transform: none !important; }
  body .ws-page .ws-laptop:hover { transform: none !important; }
  body .ws-page .ws-hero__floats { display: none !important; }

  body .ws-page .ws-showcase { grid-template-columns: 1fr !important; gap: 32px !important; }
  body .ws-page .ws-showcase__visual { position: static !important; max-width: 560px !important; margin: 0 auto !important; }
  body .ws-page .ws-pricing__grid { grid-template-columns: 1fr !important; max-width: 440px !important; margin: 0 auto !important; }
  body .ws-page .ws-pcard--featured { transform: none !important; }
  body .ws-page .ws-pcard--featured:hover { transform: translateY(-5px) !important; }
  body .ws-page .ws-tech__grid { grid-template-columns: repeat(4, 1fr) !important; }
  body .ws-page .ws-stats__grid { grid-template-columns: repeat(2, 1fr) !important; }
  body .ws-page .ws-pstep { flex: 0 0 50% !important; }
}

@media (max-width: 768px) {
  body .ws-page .ws-container { padding: 0 20px !important; }
  body .ws-page .ws-section-header { margin-bottom: 48px !important; }

  body .ws-page .ws-hero { padding: 30px 0 40px !important; }
  body .ws-page .ws-hero__inner { padding: 0 20px !important; }
  body .ws-page .ws-hero__scroll { display: none !important; }

  body .ws-page .ws-services,
  body .ws-page .ws-builder,
  body .ws-page .ws-portfolio,
  body .ws-page .ws-pricing,
  body .ws-page .ws-faq { padding: 80px 0 !important; }

  body .ws-page .ws-process,
  body .ws-page .ws-tech { padding: 80px 0 !important; }

  body .ws-page .ws-showcase__screen { height: 320px !important; }
  body .ws-page .ws-showcase__body { padding: 0 16px 0 58px !important; }
  body .ws-page .ws-showcase__item--active .ws-showcase__body { padding: 0 16px 16px 58px !important; }

  body .ws-page .ws-laptop__screen { height: 280px !important; }
  body .ws-page .ws-cmock-links, body .ws-page .ws-fmock-links { display: none !important; }

  body .ws-page .ws-portfolio__grid { grid-template-columns: 1fr !important; }
  body .ws-page .ws-pf-item__img { height: 220px !important; }

  body .ws-page .ws-tech__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }

  body .ws-page .ws-pstep { flex: 0 0 85% !important; }
  body .ws-page .ws-process__track {
    overflow-x: auto !important; scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important; padding-bottom: 16px !important;
  }
  body .ws-page .ws-pstep { scroll-snap-align: center !important; }
  body .ws-page .ws-process__line { display: none !important; }

  body .ws-page .ws-stats { padding: 56px 0 !important; }
  body .ws-page .ws-stats__grid { gap: 20px !important; }

  body .ws-page .ws-cta { min-height: 55vh !important; }
  body .ws-page .ws-cta__buttons { flex-direction: column !important; align-items: center !important; }
  body .ws-page .ws-cta__btn { width: 100% !important; max-width: 280px !important; justify-content: center !important; }

  body .ws-page .ws-hero__buttons { flex-direction: column !important; align-items: center !important; }
  body .ws-page .ws-btn { width: 100% !important; max-width: 280px !important; justify-content: center !important; }

  body .ws-page .ws-faq__q { padding: 18px 20px !important; font-size: 14px !important; }
  body .ws-page .ws-faq__a p { padding: 0 20px 18px !important; }
}

@media (max-width: 480px) {
  body .ws-page .ws-hero__title { font-size: 34px !important; letter-spacing: -1px !important; }
  body .ws-page .ws-tech__grid { grid-template-columns: repeat(2, 1fr) !important; }
  body .ws-page .ws-laptop__screen { height: 240px !important; }
  body .ws-page .ws-cmock-cards, body .ws-page .ws-fmock-cards { flex-direction: column !important; gap: 6px !important; }
  body .ws-page .ws-wire--cols { flex-direction: column !important; gap: 6px !important; }
  body .ws-page .ws-wire--col { height: 36px !important; }
}