#tos-case-study{
  --bg:#071725;
  --bg2:#0a2134;
  --gold:#e7b84b;
  --gold2:#f5cd73;
  --text:#f7f8fb;
  --muted:#b7c1cb;
  --line:rgba(255,255,255,.13);
}

#tos-case-study *{box-sizing:border-box}

#tos-case-study, #tos-case-study{
  margin:0;
  min-height:100%;
}

#tos-case-study{
  font-family:"Cairo",sans-serif;
  background:#06111c;
  color:var(--text);
}

#tos-case-study .tos-hero{
  position:relative;
  min-height:760px;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 38%,rgba(231,184,75,.12),transparent 21%),
    radial-gradient(circle at 84% 14%,rgba(245,205,115,.06),transparent 22%),
    linear-gradient(90deg,#071c31 0%,#081d33 58%,#051526 100%);
}

#tos-case-study .hero-trail{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.25;
}

#tos-case-study .hero-orbit, #tos-case-study .hero-glow{
  display:none;
}

#tos-case-study .container{
  width:min(1480px,calc(100% - 72px));
  margin-inline:auto;
}

/* SAME GRID COMPOSITION AS CRM */
#tos-case-study .hero-grid{
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(0,690px) minmax(0,560px);
  align-items:center;
  gap:185px;
  direction:ltr;
  position:relative;
  z-index:3;
}

/* LEFT VISUAL */
#tos-case-study .hero-visual{
  grid-column:1;
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  direction:ltr;
}

#tos-case-study .device-scene{
  position:relative;
  width:100%;
  max-width:790px;
  min-height:600px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

#tos-case-study .device-scene::before{
  content:"";
  position:absolute;
  left:14%;
  top:17%;
  width:56%;
  height:52%;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 40%,rgba(231,184,75,.12),rgba(231,184,75,.035) 36%,rgba(8,27,49,0) 72%),
    radial-gradient(circle at 72% 26%,rgba(245,205,115,.055),rgba(245,205,115,.018) 32%,rgba(8,27,49,0) 70%);
  filter:blur(22px);
  pointer-events:none;
}

#tos-case-study .scene-orbit{
  position:absolute;
  border-top:2px solid rgba(231,184,75,.28);
  border-radius:50%;
  pointer-events:none;
}

#tos-case-study .orbit-one{
  width:850px;
  height:290px;
  left:-90px;
  top:18px;
  transform:rotate(-8deg);
}

#tos-case-study .orbit-two{
  width:980px;
  height:370px;
  left:-60px;
  bottom:-215px;
  transform:rotate(6deg);
  border-top-color:rgba(245,205,115,.16);
}

#tos-case-study .scene-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(52px);
  pointer-events:none;
}

#tos-case-study .glow-one{
  width:240px;
  height:240px;
  left:-30px;
  top:160px;
  background:rgba(231,184,75,.09);
}

#tos-case-study .glow-two{
  width:220px;
  height:220px;
  right:70px;
  top:70px;
  background:rgba(245,205,115,.055);
}

/* EXACT CRM MOCKUP SHAPE */
#tos-case-study .laptop-mockup{
  position:relative;
  width:min(100%,680px);
  z-index:2;
  margin-inline:auto;
  transform-origin:50% 72%;
  animation:deviceFloat 5.8s cubic-bezier(.45,.05,.22,1) infinite;
}

#tos-case-study .laptop-bezel{
  position:relative;
  background:linear-gradient(180deg,#090f18,#0d141f 54%,#0a0f16 100%);
  border-radius:34px 34px 22px 22px;
  padding:18px 18px 22px;
  box-shadow:
    0 18px 34px rgba(3,8,18,.24),
    0 32px 68px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 34px rgba(231,184,75,.035);
}

#tos-case-study .laptop-bezel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:34px 34px 22px 22px;
  box-shadow:
    inset 0 0 0 2px rgba(231,184,75,.18),
    inset 0 0 24px rgba(231,184,75,.07);
  pointer-events:none;
}

#tos-case-study .laptop-notch{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:148px;
  height:18px;
  background:#060a12;
  border-radius:0 0 18px 18px;
  z-index:4;
}

#tos-case-study .laptop-screen{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  aspect-ratio:16 / 10;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.14) inset,
    0 6px 18px rgba(255,255,255,.03) inset;
  isolation:isolate;
}

#tos-case-study .dashboard-shot{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
  transform:scale(1.0);
  transform-origin:center top;
  transition:transform .55s cubic-bezier(.16,1,.3,1),filter .35s ease;
  filter:saturate(1.01) contrast(1.01);
}

#tos-case-study .laptop-screen:hover .dashboard-shot{
  transform:scale(1.03) translateY(-1px);
  filter:saturate(1.04) contrast(1.02);
}

#tos-case-study .laptop-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.08),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 80%,rgba(231,184,75,.04));
}

#tos-case-study .laptop-hinge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-14px;
  width:180px;
  height:22px;
  background:linear-gradient(180deg,#9cb4ca,#6d8193 42%,#465564 100%);
  border-radius:0 0 18px 18px;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}

#tos-case-study .laptop-base{
  width:88%;
  height:16px;
  margin:16px auto 0;
  background:linear-gradient(180deg,#dbe4ec,#9eb0c0 52%,#7e90a1 100%);
  border-radius:0 0 18px 18px;
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
  box-shadow:
    0 10px 18px rgba(0,0,0,.12),
    0 0 20px rgba(231,184,75,.025);
}

#tos-case-study .laptop-shadow{
  width:62%;
  height:20px;
  margin:10px auto 0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(3,10,20,.34) 0%,rgba(3,10,20,.18) 48%,rgba(3,10,20,0) 78%);
  filter:blur(14px);
  opacity:.85;
}

/* RIGHT CONTENT — PRESERVED */
#tos-case-study .hero-copy{
  grid-column:2;
  justify-self:end;
  width:100%;
  max-width:560px;
  padding:12px 0 10px;
  direction:rtl;
  text-align:right;
  background:none;
}

#tos-case-study .hero-badge{
  width:max-content;
  min-width:108px;
  margin:0 0 24px auto;
  padding:10px 26px;
  border:1px solid rgba(231,184,75,.72);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(116,83,18,.36),rgba(65,47,14,.22));
  color:var(--gold2);
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  box-shadow:0 0 32px rgba(231,184,75,.07);
}

#tos-case-study .hero-title{
  margin:0 0 22px;
  max-width:680px;
  font-size:clamp(52px,4.05vw,69px);
  line-height:1.22;
  letter-spacing:-1.45px;
  font-weight:800;
  color:#fff;
}

#tos-case-study .hero-title span{
  display:block;
  white-space:nowrap;
}

#tos-case-study .hero-title .accent{
  color:var(--gold2);
}

#tos-case-study .hero-description{
  max-width:620px;
  margin:0 0 28px auto;
  color:#d2dce5;
  font-size:16px;
  line-height:1.95;
}

#tos-case-study .hero-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

#tos-case-study .benefit-card{
  min-height:126px;
  padding:20px 14px 18px;
  border-radius:18px;
  border:1px solid rgba(231,184,75,.18);
  background:linear-gradient(180deg,rgba(47,41,24,.32),rgba(10,20,42,.68));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:13px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

#tos-case-study .benefit-card:hover{
  transform:translateY(-5px);
  border-color:rgba(231,184,75,.42);
  box-shadow:0 18px 38px rgba(64,45,8,.14),inset 0 1px 0 rgba(255,255,255,.04);
}

#tos-case-study .benefit-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--gold2);
  background:radial-gradient(circle,rgba(231,184,75,.15),rgba(231,184,75,.04) 70%);
  font-size:18px;
}

#tos-case-study .benefit-card strong{
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}

#tos-case-study .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .75s ease,transform .75s ease;
}

#tos-case-study .reveal.in{
  opacity:1;
  transform:none;
}

@keyframes deviceFloat{
  0%,100%{
    transform:translateY(10px) rotateZ(-.18deg);
  }
  50%{
    transform:translateY(-6px) rotateZ(.18deg);
  }
}

@media(max-width:1180px){
  #tos-case-study .tos-hero{
    min-height:auto;
    padding:46px 0 54px;
  }

  #tos-case-study .hero-grid{
    min-height:auto;
    grid-template-columns:1fr;
    gap:32px;
    direction:rtl;
  }

  #tos-case-study .hero-visual{
    grid-column:1;
    grid-row:2;
    justify-content:center;
  }

  #tos-case-study .device-scene{
    max-width:940px;
    min-height:500px;
  }

  #tos-case-study .laptop-mockup{
    width:min(100%,590px);
  }

  #tos-case-study .hero-copy{
    grid-column:1;
    grid-row:1;
    justify-self:center;
    max-width:700px;
    text-align:center;
  }

  #tos-case-study .hero-badge{
    margin-inline:auto;
  }

  #tos-case-study .hero-description{
    margin-inline:auto;
  }

  #tos-case-study .hero-benefits{
    max-width:610px;
    margin-inline:auto;
  }
}

@media(max-width:720px){
  #tos-case-study .container{
    width:min(100% - 24px,1380px);
  }

  #tos-case-study .tos-hero{
    padding:34px 0 44px;
  }

  #tos-case-study .hero-title, #tos-case-study .hero-typewriter{
    font-size:42px;
    letter-spacing:-1px;
  }

  #tos-case-study .hero-title span{
    white-space:normal;
  }

  #tos-case-study .hero-description{
    font-size:15px;
    line-height:1.85;
  }

  #tos-case-study .hero-benefits{
    grid-template-columns:1fr;
    gap:10px;
  }

  #tos-case-study .benefit-card{
    min-height:86px;
    flex-direction:row;
    padding:15px 18px;
    text-align:right;
    justify-content:flex-start;
  }

  #tos-case-study .benefit-icon{
    width:42px;
    height:42px;
    flex:0 0 auto;
  }

  #tos-case-study .device-scene{
    min-height:380px;
  }

  #tos-case-study .laptop-mockup{
    width:min(100%,455px);
  }
}


/* V7 — remove decorative background threads/orbits */
#tos-case-study .scene-orbit, #tos-case-study .orbit-one, #tos-case-study .orbit-two, #tos-case-study .scene-glow, #tos-case-study .glow-one, #tos-case-study .glow-two, #tos-case-study .hero-orbit, #tos-case-study .orbit-a, #tos-case-study .orbit-b{
  display: none !important;
}

#tos-case-study .device-scene::before{
  display:none !important;
}


/* =========================================================
   V9 — EXACT TCRM MOTION LOGIC, RECOLORED FOR TOS
========================================================= */

/* Same global fixed trail layer used by TCRM */
#tos-case-study .global-motion-trail{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:40;
  opacity:.92;
}

#tos-case-study .tos-hero{
  isolation:isolate;
}

#tos-case-study .hero-grid, #tos-case-study .hero-visual, #tos-case-study .hero-copy{
  position:relative;
  z-index:42;
}

/* TCRM-style headline typing */
#tos-case-study .hero-typewriter{
  line-height:1.16;
  min-height:3.62em;
  font-size:clamp(52px,4.05vw,69px);
}

#tos-case-study .hero-typewriter .type-line{
  display:inline-block;
  position:relative;
  min-height:1.18em;
}

#tos-case-study .hero-typewriter .type-line-2, #tos-case-study .hero-typewriter .type-line-3{
  padding-top:4px;
}

#tos-case-study .hero-typewriter .type-line.is-typing::after, #tos-case-study .hero-typewriter .type-line.is-done.cursor-on::after{
  content:"";
  position:absolute;
  top:50%;
  left:-10px;
  width:2px;
  height:.9em;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  transform:translateY(-50%);
  animation:heroCaretBlink .85s step-end infinite;
}

#tos-case-study .hero-typewriter .type-line-2.is-typing::after, #tos-case-study .hero-typewriter .type-line-2.is-done.cursor-on::after{
  background:rgba(245,205,115,.98);
}

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

/* TCRM V79-style dashboard exploration */
#tos-case-study .laptop-screen{
  cursor:crosshair;
  isolation:isolate;
}

#tos-case-study .dashboard-shot{
  --screen-pan-x:0%;
  --screen-pan-y:0%;
  --screen-zoom:1.01;

  animation:none !important;

  transform-origin:50% 50%;
  transform:
    translate3d(
      var(--screen-pan-x),
      var(--screen-pan-y),
      0
    )
    scale(var(--screen-zoom));

  transition:
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .45s ease;

  will-change:transform;
  filter:saturate(1.01) contrast(1.01);
}

#tos-case-study .laptop-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  border-radius:inherit;

  background:
    radial-gradient(
      circle at var(--screen-glow-x,50%) var(--screen-glow-y,50%),
      rgba(255,255,255,.12),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      rgba(231,184,75,.035),
      transparent 22%,
      transparent 80%,
      rgba(245,205,115,.035)
    );

  opacity:0;
  transition:opacity .4s ease;
}

#tos-case-study .laptop-screen:hover::after{
  opacity:1;
}

#tos-case-study .laptop-screen:hover .dashboard-shot{
  --screen-zoom:1.09;
  transition-duration:.32s;
  filter:saturate(1.055) contrast(1.02);
}

#tos-case-study .laptop-screen:hover{
  box-shadow:
    0 0 0 1px rgba(231,184,75,.22) inset,
    0 0 30px rgba(231,184,75,.075) inset;
}

/* TCRM-style scene movement should remain very subtle */
#tos-case-study .device-scene, #tos-case-study .hero-copy{
  transition:transform .18s linear;
  will-change:transform;
}

@media (hover:none), (pointer:coarse){
  #tos-case-study .laptop-screen{
    cursor:default;
  }

  #tos-case-study .dashboard-shot{
    --screen-zoom:1.005;
    --screen-pan-x:0%;
    --screen-pan-y:0%;
  }
}

@media(max-width:720px){
  #tos-case-study .hero-typewriter{
    line-height:1.18;
    min-height:3.9em;
  }

  #tos-case-study .hero-typewriter .type-line{
    white-space:normal;
  }
}

@media(prefers-reduced-motion:reduce){
  #tos-case-study .global-motion-trail{
    display:none !important;
  }

  #tos-case-study .dashboard-shot{
    transform:none !important;
    transition:none !important;
  }

  #tos-case-study .hero-typewriter .type-line::after{
    display:none !important;
  }
}


/* V10 safety: hero must never remain blank */
@media (prefers-reduced-motion: reduce){
  #tos-case-study .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}

/* V15 — match CRM visual breathing */
@media(min-width:1181px){
  #tos-case-study .hero-typewriter .type-line-2{
    font-size:.90em;
  }
  #tos-case-study .hero-copy{
    margin-left:0;
  }
  #tos-case-study .hero-visual{
    margin-right:0;
  }
}

/* V16 — match CRM headline vertical rhythm */
@media(min-width:1181px){
  #tos-case-study .hero-typewriter{
    line-height:1.28 !important;
    min-height:4.05em !important;
  }

  #tos-case-study .hero-typewriter .type-line{
    display:block !important;
    line-height:1.18 !important;
    min-height:0 !important;
    padding-top:0 !important;
    margin:0 0 15px 0 !important;
  }

  #tos-case-study .hero-typewriter .type-line-2{
    font-size:.90em;
    margin-bottom:15px !important;
  }

  #tos-case-study .hero-typewriter .type-line-3{
    margin-bottom:0 !important;
  }
}


/* =========================================================
   SECTION 02 — TOS CHALLENGE / CRM-LIKE SEQUENCE
========================================================= */

#tos-case-study .tos-challenge{
  position:relative;
  overflow:hidden;
  padding:112px 0 122px;
  color:#13283e;
  background:
    radial-gradient(circle at 10% 24%,rgba(231,184,75,.055),transparent 24%),
    radial-gradient(circle at 88% 72%,rgba(231,184,75,.035),transparent 25%),
    linear-gradient(135deg,#fbfbfa 0%,#f6f7fa 48%,#fbfbfa 100%);
  border-top:1px solid rgba(19,40,62,.045);
}

#tos-case-study .tos-challenge::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 48%,rgba(200,141,46,.04),transparent 25%),
    radial-gradient(circle at 72% 40%,rgba(80,174,128,.035),transparent 24%);
}

#tos-case-study .challenge-bg-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(86px);
  opacity:.70;
}

#tos-case-study .challenge-bg-glow-a{
  width:330px;
  height:330px;
  left:-120px;
  top:160px;
  background:rgba(231,184,75,.08);
}

#tos-case-study .challenge-bg-glow-b{
  width:270px;
  height:270px;
  right:5%;
  bottom:70px;
  background:rgba(80,174,128,.10);
}

#tos-case-study .challenge-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:42px;
  align-items:center;
  direction:ltr;
}

/* workflow board */
#tos-case-study .challenge-workflow{
  direction:rtl;
  position:relative;
  padding:28px;
  border:1px solid rgba(76,96,132,.14);
  border-radius:29px;
  background:rgba(255,255,255,.82);
  box-shadow:
    0 24px 70px rgba(39,54,82,.075),
    0 0 0 1px rgba(255,255,255,.76) inset;
  backdrop-filter:blur(16px);
}

#tos-case-study .workflow-head{
  min-height:68px;
  padding-bottom:17px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(27,48,74,.085);
}

#tos-case-study .workflow-kicker{
  display:block;
  margin-bottom:4px;
  color:#8b9aad;
  font-size:8px;
  font-weight:800;
  letter-spacing:2px;
}

#tos-case-study .workflow-head h3{
  margin:0;
  color:#17304b;
  font-size:21px;
  line-height:1.45;
}

#tos-case-study .workflow-range{
  flex:0 0 auto;
  padding:9px 13px;
  border:1px solid rgba(231,184,75,.34);
  border-radius:999px;
  color:#a87520;
  background:#fffbf2;
  font-size:10px;
  font-weight:800;
  direction:ltr;
}

#tos-case-study .workflow-list{
  position:relative;
  display:grid;
  gap:10px;
  margin-top:17px;
}

/* CRM reference has no visible connector line */
#tos-case-study .workflow-track{
  display:none !important;
}

#tos-case-study .workflow-item{
  --step-color:#7b72ff;
  --step-soft:rgba(123,114,255,.065);
  --step-border:rgba(123,114,255,.16);

  position:relative;
  z-index:2;
  min-height:91px;
  display:grid;
  grid-template-columns:52px 1fr 46px;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border:1px solid rgba(34,53,78,.085);
  border-radius:17px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(32,47,62,.025);
  opacity:.72;
  transform:none;
  filter:saturate(.96);
  transition:
    opacity .38s cubic-bezier(.2,.8,.2,1),
    filter .38s cubic-bezier(.2,.8,.2,1),
    border-color .38s cubic-bezier(.2,.8,.2,1),
    background .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .38s cubic-bezier(.2,.8,.2,1),
    transform .38s cubic-bezier(.2,.8,.2,1);
}

#tos-case-study .workflow-item[data-step="1"]{
  --step-color:#8a76ff;
  --step-soft:rgba(138,118,255,.072);
  --step-border:rgba(138,118,255,.28);
}

#tos-case-study .workflow-item[data-step="2"]{
  --step-color:#7b72ff;
  --step-soft:rgba(123,114,255,.065);
  --step-border:rgba(123,114,255,.25);
}

#tos-case-study .workflow-item[data-step="3"]{
  --step-color:#d79b2f;
  --step-soft:rgba(231,184,75,.085);
  --step-border:rgba(215,155,47,.30);
}

#tos-case-study .workflow-item[data-step="4"]{
  --step-color:#2a9a6c;
  --step-soft:rgba(42,154,108,.075);
  --step-border:rgba(42,154,108,.28);
}

#tos-case-study .workflow-number{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--step-color) 28%,transparent);
  border-radius:14px;
  color:var(--step-color);
  background:color-mix(in srgb,var(--step-color) 7%,white);
  font-size:11px;
  font-weight:800;
  transition:inherit;
}

#tos-case-study .workflow-copy span{
  display:block;
  color:#9ba8b7;
  font-size:7px;
  font-weight:800;
  letter-spacing:1.7px;
}

#tos-case-study .workflow-copy h4{
  margin:2px 0 3px;
  color:#17304b;
  font-size:16px;
  line-height:1.42;
}

#tos-case-study .workflow-copy p{
  margin:0;
  color:#8492a0;
  font-size:9.5px;
  line-height:1.68;
}

#tos-case-study .workflow-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--step-color);
  background:color-mix(in srgb,var(--step-color) 7%,white);
  border:1px solid color-mix(in srgb,var(--step-color) 14%,transparent);
  transition:inherit;
}

#tos-case-study .workflow-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Completed cards stay visible but quiet */
#tos-case-study .workflow-item.is-complete{
  opacity:.96;
  filter:saturate(.97);
  background:rgba(255,255,255,.92);
}

/* Active stage gets the clean spotlight, like CRM */
#tos-case-study .workflow-item.is-active{
  opacity:1;
  filter:none;
  transform:scale(1.0);
  border-color:var(--step-border);
  background:
    linear-gradient(90deg,var(--step-soft),rgba(255,255,255,.94) 30%,rgba(255,255,255,.98));
  box-shadow:
    0 10px 22px rgba(58,69,96,.04),
    0 0 0 1px color-mix(in srgb,var(--step-color) 10%,transparent),
    0 0 14px color-mix(in srgb,var(--step-color) 4%,transparent);
}

#tos-case-study .workflow-item.is-active .workflow-number, #tos-case-study .workflow-item.is-active .workflow-icon{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--step-color) 4%,transparent);
}

#tos-case-study .workflow-result{
  margin-top:12px;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 14px;
  border:1px solid rgba(42,154,108,.16);
  border-radius:15px;
  background:linear-gradient(90deg,#f7fbf9,#ffffff);
  opacity:.48;
  transform:none;
  transition:
    opacity .36s ease,
    transform .36s ease,
    border-color .36s ease,
    box-shadow .36s ease;
}

#tos-case-study .workflow-result.is-active{
  opacity:1;
  transform:none;
  border-color:rgba(42,154,108,.28);
  box-shadow:0 12px 28px rgba(42,154,108,.055);
}

#tos-case-study .workflow-result span{
  flex:0 0 auto;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  background:#183550;
  font-size:9px;
  font-weight:800;
}

#tos-case-study .workflow-result p{
  margin:0;
  color:#788793;
  font-size:9.5px;
  line-height:1.7;
}

/* content */
#tos-case-study .challenge-copy{
  direction:rtl;
  text-align:right;
  max-width:620px;
  width:100%;
  justify-self:stretch;
}

#tos-case-study .challenge-label{
  margin-bottom:21px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

#tos-case-study .challenge-no{
  display:block;
  margin-bottom:-12px;
  color:rgba(200,141,46,.12);
  font-size:86px;
  line-height:.9;
  font-weight:800;
}

#tos-case-study .challenge-en{
  padding-right:7px;
  color:#8e877c;
  font-size:8px;
  font-weight:800;
  letter-spacing:2.4px;
}

#tos-case-study .challenge-copy h2{
  margin:0;
  color:#10283f;
  font-size:clamp(45px,4.1vw,64px);
  line-height:1.34;
  letter-spacing:-1.25px;
  font-weight:800;
}

#tos-case-study .challenge-copy h2 strong{
  display:block;
  color:#c88d2e;
  font-weight:800;
}

#tos-case-study .challenge-description{
  max-width:620px;
  margin:25px 0 0 auto;
  color:#6c7b87;
  font-size:14px;
  line-height:2.08;
}

#tos-case-study .challenge-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px;
}

#tos-case-study .challenge-tags span{
  padding:9px 15px;
  border:1px solid rgba(200,141,46,.18);
  border-radius:999px;
  color:#5c6771;
  background:rgba(255,251,245,.86);
  font-size:9px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(32,47,62,.025);
}

/* whole section reveal only — cards themselves do not fly in */
#tos-case-study .challenge-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .72s ease,transform .72s ease;
}

#tos-case-study .challenge-reveal.in{
  opacity:1;
  transform:none;
}

@media(max-width:1180px){
  #tos-case-study .tos-challenge{
    padding:92px 0 100px;
  }

  #tos-case-study .challenge-grid{
    grid-template-columns:1fr;
    gap:54px;
    direction:rtl;
  }

  #tos-case-study .challenge-copy{
    grid-row:1;
    max-width:760px;
    justify-self:center;
  }

  #tos-case-study .challenge-workflow{
    grid-row:2;
    width:min(100%,820px);
    justify-self:center;
  }
}

@media(max-width:720px){
  #tos-case-study .tos-challenge{
    padding:72px 0 78px;
  }

  #tos-case-study .challenge-grid{
    gap:38px;
  }

  #tos-case-study .challenge-copy h2{
    font-size:39px;
    letter-spacing:-.7px;
  }

  #tos-case-study .challenge-description{
    font-size:13px;
    line-height:2;
  }

  #tos-case-study .challenge-workflow{
    padding:19px;
    border-radius:23px;
  }

  #tos-case-study .workflow-head h3{
    font-size:18px;
  }

  #tos-case-study .workflow-item{
    min-height:96px;
    grid-template-columns:45px 1fr 42px;
    gap:10px;
    padding:14px 12px;
  }

  #tos-case-study .workflow-number, #tos-case-study .workflow-icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }

  #tos-case-study .workflow-icon svg{
    width:20px;
    height:20px;
  }

  #tos-case-study .workflow-copy h4{
    font-size:15px;
  }

  #tos-case-study .workflow-copy p{
    font-size:9px;
  }

  #tos-case-study .workflow-track{
    display:none;
  }

  #tos-case-study .challenge-no{
    font-size:68px;
  }
}


/* =========================================================
   V21 — EXACT CRM CHALLENGE STRUCTURE + MOTION, TOS COLORS
========================================================= */

@media(min-width:1181px){
  #tos-case-study .tos-challenge .challenge-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:34px;
  }
}

#tos-case-study .tos-challenge .journey-v62{
  --step-glow-y:30%;
  --step-glow-color:rgba(231,184,75,.15);
  --pointer-glow-x:50%;
  --pointer-glow-y:45%;
  position:relative;
  min-height:520px;
  padding:30px;
  border-radius:34px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(222,216,202,.96);
  background:
    radial-gradient(circle at 12% 14%,rgba(231,184,75,.075),transparent 24%),
    radial-gradient(circle at 88% 86%,rgba(80,174,128,.045),transparent 28%),
    rgba(255,255,255,.76);
  box-shadow:0 26px 70px rgba(70,58,35,.065);
  backdrop-filter:blur(14px);
  transform:perspective(1200px) rotateX(var(--journey-tilt-x,0deg)) rotateY(var(--journey-tilt-y,0deg));
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.22,.7,.2,1),box-shadow .45s ease;
  will-change:transform;
  direction:rtl;
}

#tos-case-study .tos-challenge .journey-v62::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.58) 47%,transparent 56% 100%),
    radial-gradient(rgba(197,153,59,.065) 1px,transparent 1px);
  background-size:180% 100%,26px 26px;
  background-position:-140% 0,0 0;
  opacity:.26;
}

#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .journey-v62::before{
  animation:tosPanelSweep 4.2s cubic-bezier(.22,.72,.2,1) .2s both;
}

@keyframes tosPanelSweep{
  0%{background-position:-140% 0,0 0;opacity:.17}
  45%{opacity:.31}
  100%{background-position:140% 0,0 0;opacity:.22}
}

#tos-case-study .tos-challenge .journey-v62::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 72% 19% at 69% var(--step-glow-y),var(--step-glow-color) 0%,rgba(231,184,75,.04) 38%,transparent 72%),
    radial-gradient(circle at var(--pointer-glow-x) var(--pointer-glow-y),rgba(231,184,75,.065),transparent 31%);
  opacity:.88;
  transition:background .6s ease,opacity .45s ease;
}

#tos-case-study .tos-challenge .journey-v62:hover{
  box-shadow:0 34px 84px rgba(70,58,35,.095),0 0 44px rgba(231,184,75,.04);
}

#tos-case-study .tos-challenge .journey-v62-head, #tos-case-study .tos-challenge .journey-v62-list, #tos-case-study .tos-challenge .journey-v62-note{position:relative;z-index:2}

#tos-case-study .tos-challenge .journey-v62-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(214,207,190,.72);
}
#tos-case-study .tos-challenge .journey-v62-head div{display:grid;gap:4px}
#tos-case-study .tos-challenge .journey-v62-head span{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#9c907e;font-weight:800;direction:ltr;
}
#tos-case-study .tos-challenge .journey-v62-head h3{
  margin:0;color:#18334f;font-size:22px;line-height:1.35;
}
#tos-case-study .tos-challenge .journey-v62-head small{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(231,184,75,.44);background:rgba(255,252,244,.82);
  color:#b47b1d;font-size:11px;font-weight:800;direction:ltr;
  transition:transform .45s cubic-bezier(.16,.8,.2,1),box-shadow .45s ease,border-color .45s ease,color .45s ease;
}

#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-head{
  opacity:0;transform:translateY(12px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.2,1);
}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .journey-v62-head{
  opacity:1;transform:none;transition-delay:.22s;
}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .journey-v62-head small{
  animation:tosRangeBadge 1.05s cubic-bezier(.16,.8,.2,1) .32s both;
}
@keyframes tosRangeBadge{
  0%{transform:scale(.88);opacity:.4}
  56%{transform:scale(1.08);opacity:1;box-shadow:0 0 0 8px rgba(231,184,75,.06)}
  100%{transform:scale(1);opacity:1;box-shadow:none}
}

#tos-case-study .tos-challenge .journey-v62-list{display:grid;gap:10px}
#tos-case-study .tos-challenge .journey-v62-list::before, #tos-case-study .tos-challenge .journey-v62-list::after, #tos-case-study .tos-challenge .journey-v62-dot{display:none!important}

#tos-case-study .tos-challenge .journey-v62-item{
  position:relative;
  overflow:hidden;
  min-height:88px;
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:16px;
  padding:14px 18px 14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(224,222,214,.94);
  box-shadow:0 12px 28px rgba(56,50,36,.038);
  direction:rtl;
}

#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item{
  opacity:.34;
  transform:translateX(18px) scale(.987);
  filter:saturate(.78);
  transition:
    opacity .55s ease,
    transform .68s cubic-bezier(.16,.78,.2,1),
    filter .55s ease,
    border-color .48s ease,
    box-shadow .48s ease,
    background .48s ease;
}

#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(231,184,75,.12),rgba(241,197,103,.035) 52%,transparent 80%);
  opacity:0;transition:opacity .45s ease;
}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item::after{
  content:"";position:absolute;top:-35%;bottom:-35%;width:18%;left:-28%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.84),transparent);
  transform:skewX(-18deg);opacity:0;
}

#tos-case-study .tos-challenge .journey-v62-num, #tos-case-study .tos-challenge .journey-v62-copy{position:relative;z-index:2}

#tos-case-study .tos-challenge .journey-v62-num{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#b27d23;
  background:linear-gradient(135deg,#fffaf0,#f7ecd3);
  border:1px solid rgba(231,184,75,.45);
}
#tos-case-study .tos-challenge .stage-tasks .journey-v62-num{
  color:#a87520;background:linear-gradient(135deg,#fffaf2,#f6eddc);
}
#tos-case-study .tos-challenge .stage-files .journey-v62-num{
  color:#c88d2e;background:linear-gradient(135deg,#fff9ec,#fff0cc);border-color:#edd19a;
}
#tos-case-study .tos-challenge .stage-reports .journey-v62-num{
  color:#b27d23;background:linear-gradient(135deg,#fffaf0,#f7ecd3);border-color:rgba(231,184,75,.45);
}

#tos-case-study .tos-challenge .journey-v62-copy{min-width:0;text-align:right}
#tos-case-study .tos-challenge .journey-v62-copy small{
  display:block;margin-bottom:3px;font-size:9px;letter-spacing:1.7px;color:#9ca79f;font-weight:800;direction:ltr;text-align:right;
  transition:color .42s ease,transform .42s ease,letter-spacing .42s ease;
}
#tos-case-study .tos-challenge .journey-v62-copy h4{
  margin:0 0 4px;color:#17314d;font-size:17px;line-height:1.4;
  transition:color .42s ease,transform .42s ease,letter-spacing .42s ease;
}
#tos-case-study .tos-challenge .journey-v62-copy p{
  margin:0;color:#7a8992;font-size:12px;line-height:1.7;
  transition:color .42s ease,transform .42s ease,letter-spacing .42s ease;
}

#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-complete{
  opacity:.82;transform:none;filter:saturate(.96);
}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current{
  opacity:1;
  transform:translateX(-9px) scale(1.018);
  filter:saturate(1.08);
  background:linear-gradient(135deg,rgba(255,255,255,.99),rgba(255,252,246,.98));
  border-color:rgba(231,184,75,.52);
  box-shadow:0 22px 46px rgba(127,92,30,.12),0 0 0 2px rgba(231,184,75,.055);
}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current::before{opacity:1}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current::after{
  animation:tosCardSheen .88s cubic-bezier(.22,.7,.2,1) .08s both;
}
@keyframes tosCardSheen{
  0%{left:-28%;opacity:0}
  20%{opacity:.55}
  100%{left:118%;opacity:0}
}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current .journey-v62-copy small{
  color:#b47d20;letter-spacing:2.2px;
}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current .journey-v62-copy h4{
  transform:translateY(-1px);color:#102c4c;
}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current .journey-v62-copy p{color:#6e7e87}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current .journey-v62-num{
  animation:tosBadgeBloom .8s cubic-bezier(.16,.82,.2,1) both;
}
@keyframes tosBadgeBloom{
  0%{transform:scale(.82) rotate(-5deg);box-shadow:0 0 0 0 rgba(231,184,75,.24)}
  58%{transform:scale(1.12) rotate(1deg);box-shadow:0 0 0 12px rgba(231,184,75,0)}
  100%{transform:scale(1) rotate(0);box-shadow:0 12px 26px rgba(175,124,35,.14)}
}

#tos-case-study .tos-challenge .journey-v62-note{
  position:relative;z-index:2;margin-top:14px;display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:16px;background:rgba(255,250,241,.76);border:1px solid rgba(229,216,190,.84);direction:rtl;
}
#tos-case-study .tos-challenge .journey-v62-note span{
  flex:0 0 auto;padding:6px 10px;border-radius:999px;background:#0b2843;color:#fff;font-size:10px;font-weight:800;
}
#tos-case-study .tos-challenge .journey-v62-note p{margin:0;color:#6f7d86;font-size:11px;line-height:1.7}
#tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-note{
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-complete .journey-v62-note{
  opacity:1;transform:none;border-color:rgba(231,184,75,.25);box-shadow:0 14px 32px rgba(127,92,30,.055);
}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-complete .journey-v62-note span{
  animation:tosNoteBadge .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tosNoteBadge{
  0%{transform:scale(.86);opacity:.5}
  60%{transform:scale(1.07)}
  100%{transform:scale(1);opacity:1}
}

/* CRM-like copy sequence */
#tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy .challenge-no, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy .challenge-en, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy h2, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy > p, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy .challenge-tags{
  opacity:0;transform:translateY(18px);
  transition:opacity .72s cubic-bezier(.22,.7,.2,1),transform .72s cubic-bezier(.22,.7,.2,1);
}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .challenge-copy .challenge-no{opacity:1;transform:none;transition-delay:.04s}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .challenge-copy .challenge-en{opacity:1;transform:none;transition-delay:.12s}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .challenge-copy h2{opacity:1;transform:none;transition-delay:.20s}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .challenge-copy > p{opacity:1;transform:none;transition-delay:.34s}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .challenge-copy .challenge-tags{opacity:1;transform:none;transition-delay:.46s}

#tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy h2 strong{
  background:linear-gradient(90deg,#b87917,#d8a440 45%,#a86b13 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;background-position:100% 50%;
}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-live .challenge-copy h2 strong{
  animation:tosAccentSweep 1.35s cubic-bezier(.22,.7,.2,1) .32s both;
}
@keyframes tosAccentSweep{
  from{background-position:100% 50%;filter:brightness(.94)}
  to{background-position:0% 50%;filter:brightness(1.08)}
}

#tos-case-study .tos-challenge.challenge-motion-enabled .challenge-tags span{
  transition:transform .48s cubic-bezier(.16,.8,.2,1),background .48s ease,border-color .48s ease,color .48s ease,box-shadow .48s ease;
}
#tos-case-study .tos-challenge.phase-1 .challenge-tags span:nth-child(1), #tos-case-study .tos-challenge.phase-2 .challenge-tags span:nth-child(1), #tos-case-study .tos-challenge.phase-3 .challenge-tags span:nth-child(2), #tos-case-study .tos-challenge.phase-4 .challenge-tags span:nth-child(3){
  transform:translateY(-3px);background:rgba(255,255,255,.96);border-color:rgba(231,184,75,.36);color:#4d5f67;
  box-shadow:0 12px 28px rgba(127,92,30,.065);
}

#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-complete .journey-v62{
  box-shadow:0 32px 84px rgba(70,58,35,.09),0 0 44px rgba(231,184,75,.035);
}
#tos-case-study .tos-challenge.challenge-motion-enabled.is-sequence-complete .journey-v62-item.is-complete{
  opacity:1;filter:none;
}

@media(max-width:760px){
  #tos-case-study .tos-challenge .journey-v62{padding:20px 16px;border-radius:26px;min-height:auto;transform:none!important}
  #tos-case-study .tos-challenge .journey-v62-head{align-items:flex-start}
  #tos-case-study .tos-challenge .journey-v62-head h3{font-size:20px}
  #tos-case-study .tos-challenge .journey-v62-item{grid-template-columns:46px 1fr;gap:12px;padding:13px 14px}
  #tos-case-study .tos-challenge .journey-v62-num{width:42px;height:42px;border-radius:13px}
  #tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item{transform:translateY(10px) scale(.99)}
  #tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-current{transform:translateY(-3px) scale(1.005)}
  #tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item.is-complete{transform:none}
  #tos-case-study .tos-challenge .journey-v62::after{background:radial-gradient(ellipse 90% 16% at 55% var(--step-glow-y),var(--step-glow-color),transparent 72%)}
}

@media(prefers-reduced-motion:reduce){
  #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy .challenge-no, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy .challenge-en, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy h2, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy > p, #tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy .challenge-tags, #tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-head, #tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-item, #tos-case-study .tos-challenge.challenge-motion-enabled .journey-v62-note{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
  }
}

/* V22 — keep right-side challenge content visible while preserving CRM choreography */
#tos-case-study .tos-challenge.challenge-motion-enabled .challenge-copy.challenge-reveal{
  opacity:1 !important;
  transform:none !important;
}


/* =========================================================
   TOS SOLUTION SECTION
========================================================= */
#tos-case-study .tos-solution{
  position:relative;
  overflow:hidden;
  padding:112px 0 120px;
  background:
    radial-gradient(circle at 16% 22%, rgba(216, 196, 145, .16), transparent 23%),
    radial-gradient(circle at 86% 16%, rgba(194, 206, 228, .24), transparent 20%),
    linear-gradient(180deg, #f7f5ef 0%, #f8f7f3 52%, #f4f2ed 100%);
}

#tos-case-study .solution-bg{
  position:absolute;
  border-radius:50%;
  filter:blur(26px);
  pointer-events:none;
  opacity:.75;
}

#tos-case-study .solution-bg-a{
  width:440px;
  height:440px;
  right:-80px;
  top:46px;
  background:radial-gradient(circle, rgba(211, 201, 241, .42), rgba(211, 201, 241, 0) 70%);
}

#tos-case-study .solution-bg-b{
  width:360px;
  height:360px;
  left:4%;
  bottom:26px;
  background:radial-gradient(circle, rgba(230, 210, 166, .22), rgba(230, 210, 166, 0) 70%);
}

#tos-case-study .solution-grid{
  display:grid;
  grid-template-columns:minmax(0, 620px) minmax(0, 560px);
  gap:78px;
  align-items:center;
  direction:ltr;
  position:relative;
  z-index:2;
}

#tos-case-study .solution-map, #tos-case-study .solution-copy{
  direction:rtl;
}

#tos-case-study .solution-map{
  min-width:0;
}

#tos-case-study .solution-board{
  position:relative;
  padding:28px;
  border-radius:34px;
  border:1px solid rgba(197, 177, 133, .34);
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,252,246,.9));
  box-shadow:
    0 18px 48px rgba(50, 58, 70, .06),
    inset 0 1px 0 rgba(255,255,255,.65);
}

#tos-case-study .solution-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
  color:#556579;
}

#tos-case-study .solution-board-head span{
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  color:#9a8a68;
}

#tos-case-study .solution-board-head strong{
  font-size:24px;
  color:#183455;
}

#tos-case-study .solution-map-area{
  position:relative;
  min-height:430px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-rows:repeat(3, auto);
  align-items:center;
  justify-items:center;
  gap:18px;
  padding:8px 6px 24px;
}

#tos-case-study .solution-line{
  position:absolute;
  background:linear-gradient(90deg, rgba(223, 192, 128, .18), rgba(197, 214, 232, .62), rgba(223, 192, 128, .18));
  transform-origin:center;
  opacity:.85;
}

#tos-case-study .line-top, #tos-case-study .line-bottom{
  height:1px;
  width:50%;
  left:25%;
}

#tos-case-study .line-top{ top:22%; }
#tos-case-study .line-bottom{ bottom:23%; }

#tos-case-study .line-left, #tos-case-study .line-right{
  width:1px;
  height:44%;
  top:28%;
}

#tos-case-study .line-left{ left:24%; }
#tos-case-study .line-right{ right:24%; }

#tos-case-study .map-node, #tos-case-study .map-hub{
  position:relative;
  z-index:2;
}

#tos-case-study .map-node{
  width:100%;
  max-width:174px;
  min-height:128px;
  padding:18px 16px;
  border-radius:24px;
  border:1px solid rgba(204, 193, 170, .62);
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(249,246,240,.98));
  box-shadow:0 14px 30px rgba(38, 50, 66, .05);
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

#tos-case-study .map-node:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 34px rgba(38, 50, 66, .08);
  border-color:rgba(215, 171, 72, .6);
}

#tos-case-study .map-node small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin-bottom:12px;
  border-radius:14px;
  background:#f5efe2;
  color:#bb8221;
  font-weight:800;
}

#tos-case-study .map-node h3{
  margin:0 0 8px;
  font-size:24px;
  color:#17355a;
}

#tos-case-study .map-node p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:#6a7987;
}

#tos-case-study .node-projects{ grid-column:1; grid-row:1; }
#tos-case-study .node-tasks{ grid-column:3; grid-row:1; }
#tos-case-study .node-files{ grid-column:1; grid-row:3; }
#tos-case-study .node-reports{ grid-column:3; grid-row:3; }

#tos-case-study .map-hub{
  grid-column:2;
  grid-row:2;
  width:100%;
  max-width:228px;
  min-height:216px;
  padding:24px 18px;
  border-radius:28px;
  background:linear-gradient(180deg, #183455 0%, #14304f 100%);
  box-shadow:0 24px 44px rgba(15, 35, 58, .2);
  color:#fff;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#tos-case-study .hub-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  height:34px;
  padding:0 18px;
  border-radius:999px;
  margin-bottom:12px;
  border:1px solid rgba(243, 209, 124, .5);
  color:#f1cb70;
  font-weight:800;
  letter-spacing:.8px;
  background:rgba(255,255,255,.04);
}

#tos-case-study .map-hub h3{
  margin:0 0 10px;
  font-size:29px;
  line-height:1.25;
}

#tos-case-study .map-hub p{
  margin:0;
  font-size:14px;
  line-height:1.85;
  color:#d7deea;
}

#tos-case-study .solution-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}

#tos-case-study .strip-item{
  padding:16px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(210, 199, 178, .55);
  box-shadow:0 10px 24px rgba(45, 54, 67, .04);
}

#tos-case-study .strip-item strong{
  display:block;
  margin-bottom:6px;
  color:#17355a;
  font-size:16px;
}

#tos-case-study .strip-item span{
  display:block;
  color:#6f7d89;
  font-size:13px;
  line-height:1.7;
}

#tos-case-study .solution-copy{
  max-width:560px;
  justify-self:end;
}

#tos-case-study .solution-label{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-bottom:20px;
}

#tos-case-study .solution-no{
  font-size:80px;
  line-height:.9;
  font-weight:800;
  color:#e3dff2;
}

#tos-case-study .solution-en{
  margin-top:-8px;
  color:#909bb1;
  letter-spacing:3px;
  font-size:14px;
  font-weight:800;
}

#tos-case-study .solution-copy h2{
  margin:0 0 20px;
  font-size:clamp(42px, 3.6vw, 62px);
  line-height:1.22;
  letter-spacing:-1.3px;
  color:#17355a;
}

#tos-case-study .solution-copy h2 strong{
  display:block;
  color:#d09527;
}

#tos-case-study .solution-description{
  margin:0 0 26px;
  color:#6d7a88;
  font-size:18px;
  line-height:2;
}

#tos-case-study .solution-points{
  display:grid;
  gap:14px;
}

#tos-case-study .solution-point{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(211, 201, 183, .6);
  background:rgba(255,255,255,.52);
  box-shadow:0 12px 22px rgba(38, 50, 66, .04);
}

#tos-case-study .solution-point span{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#f5ede0;
  color:#bb8427;
  font-weight:800;
}

#tos-case-study .solution-point h3{
  margin:0 0 6px;
  font-size:22px;
  color:#17355a;
}

#tos-case-study .solution-point p{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:#6f7d89;
}

#tos-case-study .solution-map.reveal, #tos-case-study .solution-copy.reveal{
  opacity:0;
  transform:translateY(30px);
}

#tos-case-study .solution-map.reveal.in, #tos-case-study .solution-copy.reveal.in{
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s ease;
}

#tos-case-study .solution-map.reveal.in .solution-line{
  animation:lineGrow .9s ease forwards;
}

#tos-case-study .solution-map.reveal.in .line-top{ animation-delay:.08s; }
#tos-case-study .solution-map.reveal.in .line-right{ animation-delay:.18s; }
#tos-case-study .solution-map.reveal.in .line-bottom{ animation-delay:.28s; }
#tos-case-study .solution-map.reveal.in .line-left{ animation-delay:.38s; }

#tos-case-study .solution-map.reveal.in .map-node, #tos-case-study .solution-map.reveal.in .map-hub, #tos-case-study .solution-map.reveal.in .strip-item{
  opacity:0;
  transform:translateY(18px) scale(.97);
  animation:solutionPop .65s cubic-bezier(.2,.8,.2,1) forwards;
}

#tos-case-study .solution-map.reveal.in .node-projects{ animation-delay:.12s; }
#tos-case-study .solution-map.reveal.in .node-tasks{ animation-delay:.24s; }
#tos-case-study .solution-map.reveal.in .map-hub{ animation-delay:.34s; }
#tos-case-study .solution-map.reveal.in .node-files{ animation-delay:.44s; }
#tos-case-study .solution-map.reveal.in .node-reports{ animation-delay:.54s; }
#tos-case-study .solution-map.reveal.in .strip-item:nth-child(1){ animation-delay:.66s; }
#tos-case-study .solution-map.reveal.in .strip-item:nth-child(2){ animation-delay:.76s; }
#tos-case-study .solution-map.reveal.in .strip-item:nth-child(3){ animation-delay:.86s; }

@keyframes lineGrow{
  from{ opacity:0; transform:scaleX(.35) scaleY(.35); }
  to{ opacity:.85; transform:scaleX(1) scaleY(1); }
}

@keyframes solutionPop{
  from{ opacity:0; transform:translateY(18px) scale(.97); }
  to{ opacity:1; transform:none; }
}

@media (max-width: 1180px){
  #tos-case-study .solution-grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  #tos-case-study .solution-copy{
    max-width:none;
    justify-self:stretch;
    order:1;
  }

  #tos-case-study .solution-map{
    order:2;
  }
}

@media (max-width: 840px){
  #tos-case-study .tos-solution{
    padding:84px 0 92px;
  }

  #tos-case-study .solution-map-area{
    min-height:auto;
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:14px;
    padding:0;
  }

  #tos-case-study .solution-line{ display:none; }

  #tos-case-study .node-projects, #tos-case-study .node-tasks, #tos-case-study .node-files, #tos-case-study .node-reports, #tos-case-study .map-hub{
    grid-column:auto;
    grid-row:auto;
    max-width:none;
    width:100%;
  }

  #tos-case-study .map-hub{
    min-height:auto;
  }

  #tos-case-study .solution-strip{
    grid-template-columns:1fr;
  }

  #tos-case-study .solution-copy h2{
    font-size:clamp(34px, 9vw, 48px);
  }

  #tos-case-study .solution-description{
    font-size:16px;
  }
}

@media (max-width: 640px){
  #tos-case-study .solution-board{
    padding:22px 18px;
    border-radius:24px;
  }

  #tos-case-study .solution-board-head{
    flex-direction:column;
    align-items:flex-start;
    text-align:right;
  }

  #tos-case-study .solution-point{
    padding:16px;
  }

  #tos-case-study .solution-no{
    font-size:56px;
  }
}


/* =========================================================
   V26 — SIMPLER TOS SOLUTION SECTION
========================================================= */
#tos-case-study .tos-solution{
  position:relative;
  overflow:hidden;
  padding:112px 0 122px;
  color:#13283e;
  background:
    radial-gradient(circle at 10% 24%,rgba(231,184,75,.055),transparent 24%),
    radial-gradient(circle at 88% 72%,rgba(231,184,75,.035),transparent 25%),
    linear-gradient(135deg,#fbfbfa 0%,#f6f7fa 48%,#fbfbfa 100%);
  border-top:1px solid rgba(19,40,62,.045);
}

#tos-case-study .tos-solution::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 48%,rgba(200,141,46,.04),transparent 25%),
    radial-gradient(circle at 72% 40%,rgba(80,174,128,.025),transparent 24%);
}

#tos-case-study .solution-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:44px;
  align-items:center;
  direction:ltr;
}

#tos-case-study .solution-map, #tos-case-study .solution-copy{
  direction:rtl;
}

#tos-case-study .solution-board{
  padding:26px;
  border-radius:30px;
  border:1px solid rgba(76,96,132,.12);
  background:rgba(255,255,255,.78);
  box-shadow:0 24px 70px rgba(39,54,82,.06), 0 0 0 1px rgba(255,255,255,.72) inset;
  backdrop-filter:blur(12px);
}

#tos-case-study .solution-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(27,48,74,.085);
}

#tos-case-study .solution-board-head strong{
  margin:0;
  color:#17304b;
  font-size:22px;
  line-height:1.45;
}

#tos-case-study .solution-board-head span{
  color:#ad8340;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

#tos-case-study .solution-flow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

#tos-case-study .solution-flow-card, #tos-case-study .solution-hub{
  min-height:144px;
  padding:20px 18px;
  border-radius:24px;
  border:1px solid rgba(34,53,78,.085);
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(32,47,62,.03);
}

#tos-case-study .solution-flow-card small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:13px;
  margin-bottom:12px;
  background:#fff7e9;
  border:1px solid rgba(231,184,75,.26);
  color:#b77d1f;
  font-size:12px;
  font-weight:800;
}

#tos-case-study .solution-flow-card h3, #tos-case-study .solution-hub h3{
  margin:0 0 8px;
  color:#17304b;
  font-size:26px;
  line-height:1.35;
}

#tos-case-study .solution-flow-card p, #tos-case-study .solution-hub p{
  margin:0;
  color:#7a8795;
  font-size:14px;
  line-height:1.85;
}

#tos-case-study .solution-hub{
  grid-column:1 / -1;
  background:linear-gradient(180deg,#183455 0%,#14304f 100%);
  border-color:rgba(27,48,74,.1);
  box-shadow:0 18px 36px rgba(15,35,58,.14);
}

#tos-case-study .solution-hub h3, #tos-case-study .solution-hub p{
  color:#fff;
}

#tos-case-study .solution-hub p{
  color:#d8dfeb;
}

#tos-case-study .solution-hub-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  height:34px;
  padding:0 18px;
  border-radius:999px;
  margin-bottom:12px;
  border:1px solid rgba(243,209,124,.42);
  color:#f1cb70;
  background:rgba(255,255,255,.04);
  font-size:13px;
  font-weight:800;
}

#tos-case-study .solution-summary-pill{
  margin-top:16px;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid rgba(34,53,78,.085);
  background:rgba(255,255,255,.7);
  color:#566578;
  font-size:14px;
  line-height:1.8;
}

#tos-case-study .solution-copy{
  max-width:550px;
}

#tos-case-study .solution-label{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-bottom:20px;
}

#tos-case-study .solution-no{
  font-size:80px;
  line-height:.9;
  font-weight:800;
  color:#e3dff2;
}

#tos-case-study .solution-en{
  margin-top:-8px;
  color:#909bb1;
  letter-spacing:3px;
  font-size:14px;
  font-weight:800;
}

#tos-case-study .solution-copy h2{
  margin:0 0 18px;
  font-size:clamp(42px, 3.4vw, 60px);
  line-height:1.16;
  letter-spacing:-1.1px;
  color:#17355a;
}

#tos-case-study .solution-copy h2 strong{
  display:block;
  color:#d09527;
}

#tos-case-study .solution-description{
  margin:0 0 24px;
  color:#6d7a88;
  font-size:18px;
  line-height:2;
}

#tos-case-study .solution-points-simple{
  display:grid;
  gap:12px;
}

#tos-case-study .solution-point-simple{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(23,53,90,.10);
}

#tos-case-study .solution-point-simple:last-child{
  border-bottom:none;
}

#tos-case-study .solution-point-simple span{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#fff7e9;
  border:1px solid rgba(231,184,75,.24);
  color:#b77d1f;
  font-size:12px;
  font-weight:800;
}

#tos-case-study .solution-point-simple h3{
  margin:0 0 5px;
  color:#17355a;
  font-size:22px;
}

#tos-case-study .solution-point-simple p{
  margin:0;
  color:#6f7d89;
  font-size:15px;
  line-height:1.8;
}

#tos-case-study .solution-map.reveal, #tos-case-study .solution-copy.reveal{
  opacity:0;
  transform:translateY(26px);
}

#tos-case-study .solution-map.reveal.in, #tos-case-study .solution-copy.reveal.in{
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s ease;
}

#tos-case-study .solution-map.reveal.in .solution-flow-card, #tos-case-study .solution-map.reveal.in .solution-hub, #tos-case-study .solution-map.reveal.in .solution-summary-pill{
  opacity:0;
  transform:translateY(16px);
  animation:solutionFadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;
}

#tos-case-study .solution-map.reveal.in .solution-flow-card:nth-child(1){ animation-delay:.08s; }
#tos-case-study .solution-map.reveal.in .solution-flow-card:nth-child(2){ animation-delay:.18s; }
#tos-case-study .solution-map.reveal.in .solution-hub{ animation-delay:.28s; }
#tos-case-study .solution-map.reveal.in .solution-flow-card:nth-child(4){ animation-delay:.38s; }
#tos-case-study .solution-map.reveal.in .solution-flow-card:nth-child(5){ animation-delay:.48s; }
#tos-case-study .solution-map.reveal.in .solution-summary-pill{ animation-delay:.58s; }

@keyframes solutionFadeUp{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}
}

@media (max-width: 1180px){
  #tos-case-study .solution-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  #tos-case-study .solution-copy{
    max-width:none;
  }
}

@media (max-width: 720px){
  #tos-case-study .tos-solution{
    padding:86px 0 96px;
  }

  #tos-case-study .solution-board{
    padding:20px;
    border-radius:24px;
  }

  #tos-case-study .solution-flow{
    grid-template-columns:1fr;
  }

  #tos-case-study .solution-hub{
    grid-column:auto;
  }

  #tos-case-study .solution-no{
    font-size:58px;
  }

  #tos-case-study .solution-copy h2{
    font-size:clamp(34px, 9vw, 46px);
  }

  #tos-case-study .solution-description{
    font-size:16px;
  }
}


/* =========================================================
   V27 — Solution right-side refinement
========================================================= */
#tos-case-study .solution-copy{
  max-width:620px;
  width:100%;
  text-align:right;
  justify-self:stretch;
}

#tos-case-study .solution-label{
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  width:100%;
}

#tos-case-study .solution-no{
  display:block;
  margin-bottom:-12px;
  color:rgba(208,149,39,.12);
  font-size:86px;
  line-height:.9;
  font-weight:800;
}

#tos-case-study .solution-en{
  padding-right:7px;
  color:#8e877c;
  font-size:8px;
  font-weight:800;
  letter-spacing:2.4px;
  margin-top:0;
}

#tos-case-study .solution-copy h2{
  margin:0;
  color:#17355a;
  font-size:clamp(43px,3.7vw,62px);
  line-height:1.24;
  letter-spacing:-1.15px;
}

#tos-case-study .solution-title-line{
  display:block;
  color:#17355a;
}

#tos-case-study .solution-copy h2 strong{
  display:block;
  color:#d09527;
}

#tos-case-study .solution-description{
  max-width:620px;
  margin:24px 0 0 auto;
  color:#6d7a88;
  font-size:16px;
  line-height:2;
}

#tos-case-study .solution-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
}

#tos-case-study .solution-tags span{
  padding:9px 15px;
  border:1px solid rgba(200,141,46,.18);
  border-radius:999px;
  color:#5c6771;
  background:rgba(255,251,245,.86);
  font-size:9px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(32,47,62,.025);
}

@media (max-width: 720px){
  #tos-case-study .solution-copy h2{
    font-size:clamp(34px,8vw,48px);
    line-height:1.28;
  }
  #tos-case-study .solution-no{font-size:60px;}
}


/* =========================================================
   V28 — force the requested Solution layout, no legacy conflict
========================================================= */
#tos-case-study .tos-solution .solution-copy{
  direction:rtl !important;
  text-align:right !important;
  width:100% !important;
  max-width:620px !important;
  justify-self:stretch !important;
}

#tos-case-study .tos-solution .solution-label{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  margin:0 0 20px !important;
  gap:2px !important;
}

#tos-case-study .tos-solution .solution-no{
  display:block !important;
  margin:0 0 -10px !important;
  color:rgba(208,149,39,.13) !important;
  font-size:84px !important;
  line-height:.9 !important;
  font-weight:800 !important;
}

#tos-case-study .tos-solution .solution-en{
  margin:0 !important;
  padding:0 7px 0 0 !important;
  color:#8e877c !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:2.4px !important;
}

#tos-case-study .tos-solution .solution-title-v28{
  margin:0 !important;
  max-width:620px !important;
  font-size:clamp(42px,3.45vw,58px) !important;
  line-height:1.22 !important;
  letter-spacing:-1.1px !important;
  font-weight:800 !important;
}

#tos-case-study .tos-solution .solution-title-v28 .line-one, #tos-case-study .tos-solution .solution-title-v28 .line-two{
  display:block !important;
  white-space:nowrap !important;
}

#tos-case-study .tos-solution .solution-title-v28 .line-one{
  color:#17355a !important;
}

#tos-case-study .tos-solution .solution-title-v28 .line-two{
  margin-top:8px !important;
  color:#d09527 !important;
  font-weight:800 !important;
}

#tos-case-study .tos-solution .solution-description{
  max-width:620px !important;
  margin:24px 0 0 auto !important;
  color:#6d7a88 !important;
  font-size:16px !important;
  line-height:2 !important;
}

#tos-case-study .tos-solution .solution-points-simple, #tos-case-study .tos-solution .solution-point-simple{
  display:none !important;
}

#tos-case-study .tos-solution .solution-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px !important;
  margin-top:24px !important;
}

#tos-case-study .tos-solution .solution-tags span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 15px !important;
  border:1px solid rgba(200,141,46,.18) !important;
  border-radius:999px !important;
  color:#5c6771 !important;
  background:rgba(255,251,245,.86) !important;
  font-size:9px !important;
  font-weight:700 !important;
  box-shadow:0 6px 18px rgba(32,47,62,.025) !important;
}

@media(max-width:1180px){
  #tos-case-study .tos-solution .solution-title-v28 .line-one, #tos-case-study .tos-solution .solution-title-v28 .line-two{
    white-space:normal !important;
  }
}


/* =========================================================
   V29 — Z-PATTERN SWAP FOR SOLUTION SECTION
========================================================= */
@media(min-width:1181px){
  #tos-case-study .tos-solution .solution-grid{
    grid-template-columns:minmax(0,.94fr) minmax(0,1fr) !important;
    direction:ltr !important;
  }

  #tos-case-study .tos-solution .solution-copy{
    grid-column:1 !important;
    justify-self:start !important;
    align-self:center !important;
  }

  #tos-case-study .tos-solution .solution-map{
    grid-column:2 !important;
    justify-self:stretch !important;
    align-self:center !important;
  }
}

@media(max-width:1180px){
  #tos-case-study .tos-solution .solution-copy, #tos-case-study .tos-solution .solution-map{
    grid-column:auto !important;
  }
}

/* =========================================================
   V30 — keep swapped Solution columns on the SAME ROW
========================================================= */
@media(min-width:1181px){
  #tos-case-study .tos-solution .solution-grid{
    align-items:center !important;
  }

  #tos-case-study .tos-solution .solution-copy{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:start !important;
  }

  #tos-case-study .tos-solution .solution-map{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:stretch !important;
  }
}

@media(max-width:1180px){
  #tos-case-study .tos-solution .solution-copy, #tos-case-study .tos-solution .solution-map{
    grid-row:auto !important;
  }
}


/* =========================================================
   V31 — TOS SOLUTION MOTION
   Keeps V30 layout unchanged; adds clean Z-pattern animation
========================================================= */

#tos-case-study .tos-solution{
  --solution-glow-x:72%;
  --solution-glow-y:42%;
}

#tos-case-study .tos-solution::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:var(--solution-glow-x);
  top:var(--solution-glow-y);
  transform:translate(-50%,-50%);
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(231,184,75,.075) 0%,
    rgba(231,184,75,.028) 34%,
    rgba(231,184,75,0) 72%
  );
  filter:blur(24px);
  opacity:.7;
  transition:left .25s ease,top .25s ease,opacity .35s ease;
  z-index:0;
}

#tos-case-study .tos-solution .solution-grid{
  position:relative;
  z-index:2;
}

/* Motion is opt-in so the section can never stay hidden if JS fails. */
#tos-case-study .tos-solution.solution-motion-ready .solution-copy, #tos-case-study .tos-solution.solution-motion-ready .solution-map{
  opacity:0;
  will-change:transform,opacity;
}

#tos-case-study .tos-solution.solution-motion-ready .solution-copy{
  transform:translate3d(-44px,18px,0);
}

#tos-case-study .tos-solution.solution-motion-ready .solution-map{
  transform:translate3d(44px,18px,0);
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-copy, #tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-map{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    opacity .72s cubic-bezier(.22,.7,.2,1),
    transform .86s cubic-bezier(.16,.82,.2,1);
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-copy{
  transition-delay:.06s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-map{
  transition-delay:.13s;
}

/* Text choreography */
#tos-case-study .tos-solution.solution-motion-ready .solution-label, #tos-case-study .tos-solution.solution-motion-ready .solution-title-v28, #tos-case-study .tos-solution.solution-motion-ready .solution-description, #tos-case-study .tos-solution.solution-motion-ready .solution-tags{
  opacity:0;
  transform:translateY(14px);
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-label, #tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-title-v28, #tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-description, #tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-tags{
  opacity:1;
  transform:none;
  transition:
    opacity .58s ease,
    transform .66s cubic-bezier(.18,.8,.2,1);
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-label{
  transition-delay:.20s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-title-v28{
  transition-delay:.28s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-description{
  transition-delay:.38s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-tags{
  transition-delay:.48s;
}

/* Board parts sequence */
#tos-case-study .tos-solution.solution-motion-ready .solution-board-head, #tos-case-study .tos-solution.solution-motion-ready .solution-flow-card, #tos-case-study .tos-solution.solution-motion-ready .solution-hub, #tos-case-study .tos-solution.solution-motion-ready .solution-summary-pill{
  opacity:0;
  transform:translateY(15px) scale(.985);
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-board-head, #tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-flow-card, #tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-hub, #tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-summary-pill{
  opacity:1;
  transform:none;
  transition:
    opacity .52s ease,
    transform .64s cubic-bezier(.16,.82,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-board-head{
  transition-delay:.24s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-flow-card:nth-child(1){
  transition-delay:.34s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-flow-card:nth-child(2){
  transition-delay:.44s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-hub{
  transition-delay:.54s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-flow-card:nth-child(4){
  transition-delay:.64s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-flow-card:nth-child(5){
  transition-delay:.74s;
}

#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-summary-pill{
  transition-delay:.84s;
}

/* Hub emphasis after it appears */
#tos-case-study .tos-solution.solution-motion-ready.is-solution-live .solution-hub{
  animation:tosSolutionHubPulse 3.8s ease-in-out 1.08s infinite;
}

@keyframes tosSolutionHubPulse{
  0%,100%{
    box-shadow:0 18px 36px rgba(15,35,58,.14);
  }
  50%{
    box-shadow:
      0 20px 42px rgba(15,35,58,.18),
      0 0 0 1px rgba(231,184,75,.10),
      0 0 32px rgba(231,184,75,.08);
  }
}

/* Very subtle premium hover, not jumpy */
#tos-case-study .tos-solution .solution-flow-card{
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

#tos-case-study .tos-solution .solution-flow-card:hover{
  transform:translateY(-3px);
  border-color:rgba(200,141,46,.24);
  box-shadow:0 14px 28px rgba(32,47,62,.055);
}

#tos-case-study .tos-solution .solution-tags span{
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

#tos-case-study .tos-solution .solution-tags span:hover{
  transform:translateY(-2px);
  border-color:rgba(200,141,46,.32) !important;
  box-shadow:0 10px 22px rgba(127,92,30,.06) !important;
}

/* Slight interactive depth for the board */
#tos-case-study .tos-solution .solution-board{
  --solution-tilt-x:0deg;
  --solution-tilt-y:0deg;
  transform:
    perspective(1100px)
    rotateX(var(--solution-tilt-x))
    rotateY(var(--solution-tilt-y));
  transform-style:preserve-3d;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    box-shadow .34s ease;
  will-change:transform;
}

@media(max-width:1180px){
  #tos-case-study .tos-solution.solution-motion-ready .solution-copy, #tos-case-study .tos-solution.solution-motion-ready .solution-map{
    transform:translateY(28px);
  }

  #tos-case-study .tos-solution::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  #tos-case-study .tos-solution.solution-motion-ready .solution-copy, #tos-case-study .tos-solution.solution-motion-ready .solution-map, #tos-case-study .tos-solution.solution-motion-ready .solution-label, #tos-case-study .tos-solution.solution-motion-ready .solution-title-v28, #tos-case-study .tos-solution.solution-motion-ready .solution-description, #tos-case-study .tos-solution.solution-motion-ready .solution-tags, #tos-case-study .tos-solution.solution-motion-ready .solution-board-head, #tos-case-study .tos-solution.solution-motion-ready .solution-flow-card, #tos-case-study .tos-solution.solution-motion-ready .solution-hub, #tos-case-study .tos-solution.solution-motion-ready .solution-summary-pill{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }

  #tos-case-study .tos-solution .solution-board{
    transform:none !important;
  }
}


/* =========================================================
   V32 — TOS KEY SCREENS
========================================================= */

#tos-case-study .tos-screens{
  position:relative;
  overflow:hidden;
  padding:112px 0 122px;
  color:#13283e;
  background:
    radial-gradient(circle at 12% 18%,rgba(231,184,75,.055),transparent 22%),
    radial-gradient(circle at 88% 70%,rgba(231,184,75,.03),transparent 24%),
    linear-gradient(135deg,#fbfbfa 0%,#f6f7fa 48%,#fbfbfa 100%);
  border-top:1px solid rgba(19,40,62,.045);
}

#tos-case-study .tos-screens::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 54%,rgba(200,141,46,.035),transparent 24%),
    radial-gradient(circle at 80% 22%,rgba(23,53,90,.025),transparent 20%);
}

#tos-case-study .screens-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.36fr) minmax(360px,.64fr);
  gap:64px;
  align-items:center;
  direction:ltr;
}

#tos-case-study .screens-showcase, #tos-case-study .screens-copy{
  direction:rtl;
}

#tos-case-study .screens-showcase{
  min-width:0;
}

#tos-case-study .screens-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
  direction:ltr;
}

#tos-case-study .screen-tab{
  position:relative;
  appearance:none;
  border:1px solid rgba(34,53,78,.085);
  border-radius:20px;
  padding:10px;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 26px rgba(32,47,62,.03);
  cursor:pointer;
  text-align:right;
  color:#17304b;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

#tos-case-study .screen-tab:hover{
  transform:translateY(-3px);
  border-color:rgba(200,141,46,.26);
  box-shadow:0 12px 30px rgba(32,47,62,.055);
}

#tos-case-study .screen-tab.is-active{
  border-color:rgba(200,141,46,.72);
  background:linear-gradient(180deg,#fffdf8,#fff8e9);
  box-shadow:
    0 14px 34px rgba(128,89,22,.08),
    0 0 0 1px rgba(231,184,75,.09) inset;
}

#tos-case-study .screen-tab.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:14px;
  height:14px;
  background:#fff8e9;
  border-right:1px solid rgba(200,141,46,.52);
  border-bottom:1px solid rgba(200,141,46,.52);
  transform:translateX(-50%) rotate(45deg);
}

#tos-case-study .screen-tab-thumb{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:13px;
  background:#f2efe8;
  margin-bottom:9px;
}

#tos-case-study .screen-tab-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.96) contrast(.99);
  transition:transform .36s ease,filter .36s ease;
}

#tos-case-study .screen-tab:hover .screen-tab-thumb img, #tos-case-study .screen-tab.is-active .screen-tab-thumb img{
  transform:scale(1.025);
  filter:saturate(1.02) contrast(1);
}

#tos-case-study .screen-tab-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  direction:rtl;
}

#tos-case-study .screen-tab-copy small{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  background:#fff7e9;
  border:1px solid rgba(231,184,75,.22);
  color:#b77d1f;
  font-size:10px;
  font-weight:800;
}

#tos-case-study .screen-tab-copy strong{
  font-size:13px;
  line-height:1.4;
}

#tos-case-study .screens-browser{
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(34,53,78,.10);
  background:#fff;
  box-shadow:
    0 26px 70px rgba(31,48,72,.09),
    0 0 0 1px rgba(255,255,255,.86) inset;
}

#tos-case-study .screens-browser-top{
  min-height:46px;
  padding:0 15px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  direction:ltr;
  background:linear-gradient(180deg,#fff,#f7f7f4);
  border-bottom:1px solid rgba(34,53,78,.075);
}

#tos-case-study .browser-dots{
  display:flex;
  gap:7px;
}

#tos-case-study .browser-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#e8b84b;
}

#tos-case-study .browser-dots span:nth-child(2){ background:#e3c778; }
#tos-case-study .browser-dots span:nth-child(3){ background:#7ebc98; }

#tos-case-study .browser-address{
  justify-self:center;
  width:min(360px,72%);
  padding:7px 14px;
  border-radius:999px;
  color:#9aa3ae;
  background:#fff;
  border:1px solid rgba(34,53,78,.065);
  text-align:center;
  font-size:9px;
  letter-spacing:.2px;
}

#tos-case-study .browser-badge{
  color:#b07a22;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
}

#tos-case-study .screens-preview{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/7.7;
  background:#f4f2ec;
}

#tos-case-study .screens-preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}

#tos-case-study .screens-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transform:scale(1.002);
  opacity:1;
  transition:
    opacity .28s ease,
    transform .58s cubic-bezier(.18,.8,.2,1);
}

#tos-case-study .screens-preview.is-changing img{
  opacity:.16;
  transform:scale(.992);
}

#tos-case-study .screens-preview-meta{
  display:grid;
  grid-template-columns:minmax(180px,.42fr) 1fr;
  gap:28px;
  align-items:center;
  padding:18px 22px 20px;
  direction:rtl;
  border-top:1px solid rgba(34,53,78,.07);
  background:linear-gradient(180deg,#fff,#fffdf8);
}

#tos-case-study .screens-preview-meta small{
  display:block;
  margin-bottom:3px;
  color:#b17a22;
  font-size:8px;
  font-weight:800;
  letter-spacing:2px;
}

#tos-case-study .screens-preview-meta h3{
  margin:0;
  color:#17304b;
  font-size:23px;
}

#tos-case-study .screens-preview-meta p{
  margin:0;
  color:#748391;
  font-size:13px;
  line-height:1.85;
}

#tos-case-study .screens-copy{
  max-width:500px;
  width:100%;
  justify-self:end;
  text-align:right;
}

#tos-case-study .screens-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin-bottom:20px;
}

#tos-case-study .screens-no{
  display:block;
  margin-bottom:-12px;
  color:rgba(200,141,46,.12);
  font-size:86px;
  line-height:.9;
  font-weight:800;
}

#tos-case-study .screens-en{
  padding-right:7px;
  color:#8e877c;
  font-size:8px;
  font-weight:800;
  letter-spacing:2.4px;
}

#tos-case-study .screens-copy h2{
  margin:0;
  color:#10283f;
  font-size:clamp(46px,4vw,64px);
  line-height:1.24;
  letter-spacing:-1.2px;
  font-weight:800;
}

#tos-case-study .screens-copy h2 strong{
  display:block;
  color:#c88d2e;
  font-weight:800;
}

#tos-case-study .screens-description{
  margin:24px 0 0;
  color:#6c7b87;
  font-size:15px;
  line-height:2;
}

#tos-case-study .screens-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px;
}

#tos-case-study .screens-tags span{
  padding:9px 15px;
  border:1px solid rgba(200,141,46,.18);
  border-radius:999px;
  color:#5c6771;
  background:rgba(255,251,245,.86);
  font-size:9px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(32,47,62,.025);
}

/* Clean section animation */
#tos-case-study .tos-screens.screens-motion-ready .screens-copy, #tos-case-study .tos-screens.screens-motion-ready .screens-showcase{
  opacity:0;
  will-change:opacity,transform;
}

#tos-case-study .tos-screens.screens-motion-ready .screens-copy{
  transform:translate3d(32px,16px,0);
}

#tos-case-study .tos-screens.screens-motion-ready .screens-showcase{
  transform:translate3d(-32px,16px,0);
}

#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screens-copy, #tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screens-showcase{
  opacity:1;
  transform:none;
  transition:
    opacity .72s ease,
    transform .84s cubic-bezier(.16,.82,.2,1);
}

#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screens-showcase{
  transition-delay:.06s;
}

#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screens-copy{
  transition-delay:.14s;
}

#tos-case-study .tos-screens.screens-motion-ready .screen-tab{
  opacity:0;
  transform:translateY(14px);
}

#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screen-tab{
  opacity:1;
  transform:none;
  transition:
    opacity .46s ease,
    transform .58s cubic-bezier(.16,.82,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screen-tab:nth-child(1){transition-delay:.18s}
#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screen-tab:nth-child(2){transition-delay:.26s}
#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screen-tab:nth-child(3){transition-delay:.34s}
#tos-case-study .tos-screens.screens-motion-ready.is-screens-live .screen-tab:nth-child(4){transition-delay:.42s}

@media(max-width:1180px){
  #tos-case-study .screens-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  #tos-case-study .screens-copy{
    max-width:none;
    justify-self:stretch;
    order:1;
  }

  #tos-case-study .screens-showcase{
    order:2;
  }
}

@media(max-width:760px){
  #tos-case-study .tos-screens{
    padding:86px 0 96px;
  }

  #tos-case-study .screens-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #tos-case-study .screens-preview{
    aspect-ratio:16/9;
  }

  #tos-case-study .screens-preview-meta{
    grid-template-columns:1fr;
    gap:10px;
  }

  #tos-case-study .screens-copy h2{
    font-size:clamp(36px,10vw,48px);
  }
}

@media(max-width:520px){
  #tos-case-study .screens-tabs{
    grid-template-columns:1fr;
  }

  #tos-case-study .screen-tab{
    display:grid;
    grid-template-columns:120px 1fr;
    align-items:center;
    gap:12px;
  }

  #tos-case-study .screen-tab-thumb{
    margin-bottom:0;
  }

  #tos-case-study .screen-tab.is-active::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  #tos-case-study .tos-screens.screens-motion-ready .screens-copy, #tos-case-study .tos-screens.screens-motion-ready .screens-showcase, #tos-case-study .tos-screens.screens-motion-ready .screen-tab{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   V33 — KEY SCREENS / CRM STRUCTURE, TOS VISUAL THEME
========================================================= */

#tos-case-study .tos-screens-crm{
  position:relative;
  overflow:hidden;
  padding:112px 0 124px;
  color:#13283e;
  background:
    radial-gradient(circle at 12% 24%,rgba(231,184,75,.06),transparent 24%),
    radial-gradient(circle at 84% 18%,rgba(23,53,90,.035),transparent 22%),
    linear-gradient(135deg,#fbfbfa 0%,#f6f7fa 48%,#fbfbfa 100%);
  border-top:1px solid rgba(19,40,62,.045);
}

#tos-case-study .tos-screens-crm::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 78%,rgba(200,141,46,.035),transparent 24%),
    radial-gradient(circle at 65% 54%,rgba(80,174,128,.022),transparent 23%);
}

#tos-case-study .tos-screens-crm-shell{
  position:relative;
  z-index:2;
}

#tos-case-study .tos-screens-crm-top{
  display:grid;
  grid-template-columns:minmax(0,1.54fr) minmax(360px,.66fr);
  gap:72px;
  align-items:end;
  direction:ltr;
}

#tos-case-study .tos-screens-crm-copy{
  direction:rtl;
  text-align:right;
  max-width:440px;
  width:100%;
  justify-self:end;
  padding-bottom:9px;
}

#tos-case-study .tos-screens-crm-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 14px;
  margin-bottom:16px;
  border:1px solid rgba(200,141,46,.20);
  border-radius:999px;
  color:#8d6b34;
  background:rgba(255,251,245,.86);
  font-size:9px;
  font-weight:800;
}

#tos-case-study .tos-screens-crm-copy h2{
  margin:0;
  color:#10283f;
  font-size:clamp(48px,4.4vw,70px);
  line-height:1.08;
  letter-spacing:-1.5px;
  font-weight:800;
}

#tos-case-study .tos-screens-crm-copy h2 strong{
  color:#c88d2e;
  font-weight:800;
}

#tos-case-study .tos-screens-crm-copy p{
  max-width:440px;
  margin:22px 0 0 auto;
  color:#6c7b87;
  font-size:14px;
  line-height:2;
}

#tos-case-study .tos-screens-crm-tabs{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  direction:rtl;
  align-items:end;
}

#tos-case-study .tos-screen-card{
  position:relative;
  appearance:none;
  min-width:0;
  padding:9px 9px 15px;
  border:1px solid rgba(34,53,78,.085);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:
    0 10px 28px rgba(32,47,62,.035),
    inset 0 1px 0 rgba(255,255,255,.78);
  color:#17304b;
  cursor:pointer;
  text-align:right;
  transform:translateY(0);
  transition:
    transform .30s cubic-bezier(.18,.8,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    opacity .28s ease;
}

#tos-case-study .tos-screen-card:hover{
  transform:translateY(-5px);
  border-color:rgba(200,141,46,.24);
  box-shadow:0 16px 34px rgba(40,50,63,.06);
}

#tos-case-study .tos-screen-card.is-active{
  transform:translateY(-9px);
  border-color:rgba(200,141,46,.78);
  background:linear-gradient(180deg,#fffdf9,#fff9ec);
  box-shadow:
    0 18px 40px rgba(113,78,20,.09),
    0 0 0 1px rgba(231,184,75,.10) inset;
}

#tos-case-study .tos-screen-card.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:14px;
  height:14px;
  background:#fff9ec;
  border-right:1px solid rgba(200,141,46,.62);
  border-bottom:1px solid rgba(200,141,46,.62);
  transform:translateX(-50%) rotate(45deg);
}

#tos-case-study .tos-screen-thumb{
  display:block;
  overflow:hidden;
  aspect-ratio:1.45/1;
  border-radius:15px;
  background:#f1efe9;
}

#tos-case-study .tos-screen-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.92) contrast(.99);
  transition:
    transform .42s cubic-bezier(.18,.8,.2,1),
    filter .30s ease;
}

#tos-case-study .tos-screen-card:hover .tos-screen-thumb img, #tos-case-study .tos-screen-card.is-active .tos-screen-thumb img{
  transform:scale(1.025);
  filter:saturate(1.01) contrast(1);
}

#tos-case-study .tos-screen-card-footer{
  display:block;
  min-height:62px;
  padding:11px 7px 0;
}

#tos-case-study .tos-screen-card-footer strong{
  display:block;
  margin-bottom:4px;
  color:#17304b;
  font-size:13px;
  line-height:1.45;
}

#tos-case-study .tos-screen-card-footer small{
  display:block;
  color:#8b97a3;
  font-size:8px;
  line-height:1.55;
}

#tos-case-study .tos-screen-card-icon{
  position:absolute;
  right:12px;
  bottom:-14px;
  z-index:4;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(180deg,#d6a54b,#b87b19);
  box-shadow:0 9px 24px rgba(151,102,21,.22);
  font-size:14px;
  font-weight:800;
  transform:scale(.92);
  transition:transform .3s ease,box-shadow .3s ease;
}

#tos-case-study .tos-screen-card.is-active .tos-screen-card-icon{
  transform:scale(1.08);
  box-shadow:
    0 11px 28px rgba(151,102,21,.26),
    0 0 0 5px rgba(231,184,75,.08);
  animation:tosActiveScreenIcon 2.2s ease-in-out infinite;
}

@keyframes tosActiveScreenIcon{
  0%,100%{transform:scale(1.08) translateY(0)}
  50%{transform:scale(1.08) translateY(-3px)}
}

#tos-case-study .tos-screens-crm-body{
  margin-top:34px;
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:32px;
  align-items:start;
  direction:ltr;
}

#tos-case-study .tos-screens-crm-features{
  direction:rtl;
  display:grid;
  gap:13px;
  padding-top:34px;
}

#tos-case-study .tos-screen-feature{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:13px;
  align-items:center;
  direction:ltr;
  padding:10px 0;
}

#tos-case-study .tos-screen-feature > div{
  direction:rtl;
  text-align:right;
}

#tos-case-study .tos-screen-feature-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  font-size:15px;
  font-weight:800;
}

#tos-case-study .tos-screen-feature-icon.gold{
  color:#b67c1d;
  background:rgba(231,184,75,.14);
}

#tos-case-study .tos-screen-feature-icon.mint{
  color:#2b9a6b;
  background:rgba(80,174,128,.12);
}

#tos-case-study .tos-screen-feature-icon.amber{
  color:#ca8e26;
  background:rgba(218,151,41,.10);
}

#tos-case-study .tos-screen-feature-icon.navy{
  color:#17355a;
  background:rgba(23,53,90,.08);
}

#tos-case-study .tos-screen-feature h3{
  margin:0 0 4px;
  color:#324c68;
  font-size:14px;
  line-height:1.4;
}

#tos-case-study .tos-screen-feature p{
  margin:0;
  color:#8a96a2;
  font-size:9px;
  line-height:1.65;
}

#tos-case-study .tos-screens-crm-stage{
  min-width:0;
  direction:rtl;
}

#tos-case-study .tos-screens-crm-browser{
  overflow:hidden;
  border-radius:27px;
  border:1px solid rgba(34,53,78,.105);
  background:#fff;
  box-shadow:
    0 28px 75px rgba(31,48,72,.10),
    0 0 0 1px rgba(255,255,255,.88) inset;
}

#tos-case-study .tos-screens-crm-browserbar{
  min-height:44px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  direction:ltr;
  padding:0 14px;
  border-bottom:1px solid rgba(34,53,78,.07);
  background:linear-gradient(180deg,#fff,#f8f8f5);
}

#tos-case-study .tos-browser-dots{
  display:flex;
  gap:7px;
}

#tos-case-study .tos-browser-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
}

#tos-case-study .tos-browser-dots span:nth-child(1){background:#e7967c}
#tos-case-study .tos-browser-dots span:nth-child(2){background:#e7c96e}
#tos-case-study .tos-browser-dots span:nth-child(3){background:#72b992}

#tos-case-study .tos-browser-address{
  justify-self:center;
  width:min(360px,72%);
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(34,53,78,.06);
  background:#fff;
  color:#a0a9b1;
  text-align:center;
  font-size:8px;
}

#tos-case-study .tos-browser-status{
  display:flex;
  align-items:center;
  gap:6px;
  color:#8d98a4;
  font-size:8px;
}

#tos-case-study .tos-browser-status span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4caf78;
  box-shadow:0 0 0 4px rgba(76,175,120,.08);
}

#tos-case-study .tos-crm-preview{
  position:relative;
  overflow:hidden;
  aspect-ratio:1.92/1;
  background:#f1efe8;
}

#tos-case-study .tos-crm-preview-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transition:
    opacity .34s ease,
    transform .48s cubic-bezier(.2,.8,.2,1),
    filter .34s ease;
}

#tos-case-study .tos-crm-preview-img.is-current{
  z-index:2;
  opacity:1;
  transform:translate3d(0,0,0) scale(1.002);
  filter:saturate(1) contrast(1);
}

#tos-case-study .tos-crm-preview-img.is-next{
  z-index:3;
  opacity:0;
  transform:translate3d(18px,0,0) scale(.996);
  filter:saturate(.96) contrast(.99);
}

#tos-case-study .tos-crm-preview-img.is-next.is-entering{
  opacity:1;
  transform:translate3d(0,0,0) scale(1.002);
  filter:saturate(1) contrast(1);
}

#tos-case-study .tos-crm-preview-img.is-current.is-leaving{
  opacity:.06;
  transform:translate3d(-12px,0,0) scale(.997);
}

#tos-case-study .tos-screens-crm-caption{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:26px;
  align-items:center;
  padding:16px 8px 0;
  direction:rtl;
}

#tos-case-study .tos-screens-crm-caption-copy{
  text-align:right;
}

#tos-case-study .tos-screens-crm-caption-copy small{
  display:block;
  margin-bottom:3px;
  color:#b27c21;
  font-size:8px;
  font-weight:800;
  letter-spacing:2px;
}

#tos-case-study .tos-screens-crm-caption-copy h3{
  margin:0;
  color:#17304b;
  font-size:24px;
}

#tos-case-study .tos-screens-crm-caption p{
  margin:0;
  color:#788692;
  font-size:10px;
  line-height:1.8;
}

/* Section reveal follows the CRM rhythm: header + cards first, stage after */
#tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-copy, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screen-card, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screen-feature, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-browser, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-caption{
  opacity:0;
  will-change:opacity,transform;
}

#tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-copy{
  transform:translateY(18px);
}

#tos-case-study .tos-screens-crm.is-motion-ready .tos-screen-card{
  transform:translateY(18px);
}

#tos-case-study .tos-screens-crm.is-motion-ready .tos-screen-feature{
  transform:translateX(-16px);
}

#tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-browser{
  transform:translateY(20px) scale(.992);
}

#tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-caption{
  transform:translateY(12px);
}

#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screens-crm-copy, #tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-card, #tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-feature, #tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screens-crm-browser, #tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screens-crm-caption{
  opacity:1;
  transform:none;
  transition:
    opacity .60s ease,
    transform .72s cubic-bezier(.16,.82,.2,1);
}

#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screens-crm-copy{transition-delay:.04s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-card:nth-child(1){transition-delay:.10s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-card:nth-child(2){transition-delay:.16s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-card:nth-child(3){transition-delay:.22s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-card:nth-child(4){transition-delay:.28s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-feature:nth-child(1){transition-delay:.26s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-feature:nth-child(2){transition-delay:.33s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-feature:nth-child(3){transition-delay:.40s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-feature:nth-child(4){transition-delay:.47s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screens-crm-browser{transition-delay:.32s}
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screens-crm-caption{transition-delay:.45s}

/* preserve active lift after entry animation */
#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-card.is-active{
  transform:translateY(-9px);
}

@media(max-width:1180px){
  #tos-case-study .tos-screens-crm-top{
    grid-template-columns:1fr;
    gap:36px;
  }

  #tos-case-study .tos-screens-crm-copy{
    max-width:none;
    justify-self:stretch;
    order:1;
  }

  #tos-case-study .tos-screens-crm-tabs{
    order:2;
  }

  #tos-case-study .tos-screens-crm-body{
    grid-template-columns:1fr;
    gap:26px;
  }

  #tos-case-study .tos-screens-crm-features{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-top:0;
  }
}

@media(max-width:760px){
  #tos-case-study .tos-screens-crm{
    padding:86px 0 96px;
  }

  #tos-case-study .tos-screens-crm-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 12px;
  }

  #tos-case-study .tos-screens-crm-copy h2{
    font-size:clamp(38px,11vw,52px);
  }

  #tos-case-study .tos-screens-crm-features{
    grid-template-columns:1fr;
  }

  #tos-case-study .tos-screens-crm-caption{
    grid-template-columns:1fr;
    gap:8px;
  }
}

@media(max-width:500px){
  #tos-case-study .tos-screens-crm-tabs{
    grid-template-columns:1fr;
  }

  #tos-case-study .tos-screen-card{
    display:grid;
    grid-template-columns:132px 1fr;
    gap:12px;
    align-items:center;
  }

  #tos-case-study .tos-screen-card-footer{
    padding:0 4px 0 0;
  }

  #tos-case-study .tos-screen-card.is-active::after{
    display:none;
  }

  #tos-case-study .tos-screen-card-icon{
    right:auto;
    left:10px;
    bottom:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  #tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-copy, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screen-card, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screen-feature, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-browser, #tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-caption{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  #tos-case-study .tos-screen-card.is-active{
    transform:none !important;
  }

  #tos-case-study .tos-screen-card.is-active .tos-screen-card-icon{
    animation:none !important;
  }
}


/* =========================================================
   V34 — KEY SCREENS REFINED / QUIETER CRM PROPORTIONS
========================================================= */

#tos-case-study .tos-screens-crm{
  padding:96px 0 108px !important;
}

/* More breathing, smaller copy block */
#tos-case-study .tos-screens-crm-top{
  grid-template-columns:minmax(0,1.62fr) minmax(310px,.54fr) !important;
  gap:46px !important;
  align-items:end !important;
}

#tos-case-study .tos-screens-crm-copy{
  max-width:370px !important;
  padding-bottom:2px !important;
}

#tos-case-study .tos-screens-crm-badge{
  min-height:26px !important;
  padding:0 12px !important;
  margin-bottom:12px !important;
  font-size:8px !important;
}

#tos-case-study .tos-screens-crm-copy h2{
  font-size:clamp(42px,3.55vw,56px) !important;
  line-height:1.10 !important;
  letter-spacing:-1.15px !important;
}

#tos-case-study .tos-screens-crm-copy p{
  max-width:365px !important;
  margin-top:16px !important;
  font-size:12px !important;
  line-height:1.9 !important;
}

/* Smaller, quieter top cards */
#tos-case-study .tos-screens-crm-tabs{
  gap:12px !important;
}

#tos-case-study .tos-screen-card{
  padding:8px 8px 10px !important;
  border-radius:18px !important;
  box-shadow:0 7px 20px rgba(32,47,62,.028) !important;
}

#tos-case-study .tos-screen-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(32,47,62,.045) !important;
}

#tos-case-study .tos-screen-card.is-active{
  transform:translateY(-4px) !important;
  border-color:rgba(200,141,46,.58) !important;
  box-shadow:
    0 12px 28px rgba(113,78,20,.065),
    0 0 0 1px rgba(231,184,75,.07) inset !important;
}

#tos-case-study .tos-screen-card.is-active::after{
  width:10px !important;
  height:10px !important;
  bottom:-6px !important;
}

#tos-case-study .tos-screen-thumb{
  aspect-ratio:1.72/1 !important;
  border-radius:12px !important;
}

#tos-case-study .tos-screen-card-footer{
  min-height:44px !important;
  padding:8px 5px 0 !important;
}

#tos-case-study .tos-screen-card-footer strong{
  margin-bottom:0 !important;
  font-size:11px !important;
}

#tos-case-study .tos-screen-card-footer small{
  display:none !important;
}

#tos-case-study .tos-screen-card-icon{
  width:30px !important;
  height:30px !important;
  right:10px !important;
  bottom:-11px !important;
  border-radius:10px !important;
  font-size:11px !important;
  box-shadow:0 7px 18px rgba(151,102,21,.16) !important;
  transform:none !important;
}

#tos-case-study .tos-screen-card.is-active .tos-screen-card-icon{
  transform:none !important;
  animation:none !important;
  box-shadow:
    0 8px 20px rgba(151,102,21,.18),
    0 0 0 3px rgba(231,184,75,.055) !important;
}

/* Preview owns the section */
#tos-case-study .tos-screens-crm-body{
  margin-top:26px !important;
  grid-template-columns:160px minmax(0,1fr) !important;
  gap:24px !important;
}

#tos-case-study .tos-screens-crm-features{
  gap:8px !important;
  padding-top:24px !important;
}

#tos-case-study .tos-screen-feature{
  grid-template-columns:32px 1fr !important;
  gap:10px !important;
  padding:8px 0 !important;
}

#tos-case-study .tos-screen-feature-icon{
  width:30px !important;
  height:30px !important;
  border-radius:9px !important;
  font-size:11px !important;
}

#tos-case-study .tos-screen-feature h3{
  margin-bottom:2px !important;
  font-size:11px !important;
  color:#425873 !important;
}

#tos-case-study .tos-screen-feature p{
  font-size:7.5px !important;
  line-height:1.55 !important;
  color:#99a3ad !important;
}

#tos-case-study .tos-screens-crm-browser{
  border-radius:22px !important;
  box-shadow:
    0 22px 58px rgba(31,48,72,.075),
    0 0 0 1px rgba(255,255,255,.88) inset !important;
}

#tos-case-study .tos-screens-crm-browserbar{
  min-height:38px !important;
  padding:0 12px !important;
}

#tos-case-study .tos-browser-dots span{
  width:8px !important;
  height:8px !important;
}

#tos-case-study .tos-browser-address{
  width:min(330px,70%) !important;
  padding:5px 12px !important;
  font-size:7px !important;
}

#tos-case-study .tos-browser-status{
  font-size:7px !important;
}

#tos-case-study .tos-crm-preview{
  aspect-ratio:2.12/1 !important;
}

#tos-case-study .tos-crm-preview-img{
  transition:
    opacity .28s ease,
    transform .38s cubic-bezier(.2,.8,.2,1),
    filter .28s ease !important;
}

#tos-case-study .tos-crm-preview-img.is-current{
  transform:scale(1.001) !important;
}

#tos-case-study .tos-crm-preview-img.is-next{
  transform:scale(.994) !important;
}

#tos-case-study .tos-crm-preview-img.is-next.is-entering{
  transform:scale(1.001) !important;
}

#tos-case-study .tos-crm-preview-img.is-current.is-leaving{
  transform:scale(.998) !important;
}

/* Lighter caption */
#tos-case-study .tos-screens-crm-caption{
  grid-template-columns:150px 1fr !important;
  gap:18px !important;
  padding:12px 5px 0 !important;
}

#tos-case-study .tos-screens-crm-caption-copy small{
  font-size:7px !important;
  letter-spacing:1.6px !important;
}

#tos-case-study .tos-screens-crm-caption-copy h3{
  font-size:18px !important;
}

#tos-case-study .tos-screens-crm-caption p{
  font-size:8px !important;
  line-height:1.7 !important;
}

/* Clean motion: no visual competition */
#tos-case-study .tos-screens-crm.is-motion-ready .tos-screen-feature{
  transform:translateY(8px) !important;
}

#tos-case-study .tos-screens-crm.is-motion-ready .tos-screens-crm-browser{
  transform:translateY(14px) scale(.996) !important;
}

#tos-case-study .tos-screens-crm.is-motion-ready.is-live .tos-screen-card.is-active{
  transform:translateY(-4px) !important;
}

/* Avoid layered old V32 visuals if any */
#tos-case-study .tos-screens{
  display:none !important;
}

@media(max-width:1180px){
  #tos-case-study .tos-screens-crm-top{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  #tos-case-study .tos-screens-crm-copy{
    max-width:none !important;
  }

  #tos-case-study .tos-screens-crm-body{
    grid-template-columns:1fr !important;
  }

  #tos-case-study .tos-screens-crm-features{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    padding-top:0 !important;
  }
}

@media(max-width:760px){
  #tos-case-study .tos-screens-crm{
    padding:78px 0 88px !important;
  }

  #tos-case-study .tos-screens-crm-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #tos-case-study .tos-screens-crm-copy h2{
    font-size:clamp(36px,10vw,48px) !important;
  }

  #tos-case-study .tos-screens-crm-features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #tos-case-study .tos-crm-preview{
    aspect-ratio:16/9 !important;
  }
}

@media(max-width:500px){
  #tos-case-study .tos-screens-crm-tabs{
    grid-template-columns:1fr !important;
  }

  #tos-case-study .tos-screens-crm-features{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   V35 — TOP KEY-SCREENS AREA MATCH CRM PROPORTIONS
========================================================= */
@media(min-width:1181px){
  #tos-case-study .tos-screens-crm{
    padding-top:104px !important;
  }

  #tos-case-study .tos-screens-crm-top{
    grid-template-columns:minmax(0,1.72fr) minmax(390px,.58fr) !important;
    gap:70px !important;
    align-items:center !important;
  }

  #tos-case-study .tos-screens-crm-copy{
    max-width:440px !important;
    padding-bottom:0 !important;
  }

  #tos-case-study .tos-screens-crm-badge{
    min-height:34px !important;
    padding:0 16px !important;
    margin-bottom:16px !important;
    font-size:9px !important;
    border-radius:999px !important;
  }

  #tos-case-study .tos-screens-crm-copy h2{
    font-size:clamp(60px,4.7vw,78px) !important;
    line-height:1.08 !important;
    letter-spacing:-1.6px !important;
  }

  #tos-case-study .tos-screens-crm-copy p{
    max-width:430px !important;
    margin-top:22px !important;
    font-size:14px !important;
    line-height:1.9 !important;
  }

  #tos-case-study .tos-screens-crm-tabs{
    gap:16px !important;
    align-items:stretch !important;
  }

  #tos-case-study .tos-screen-card{
    min-height:238px !important;
    padding:11px 11px 18px !important;
    border-radius:24px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    box-shadow:0 10px 30px rgba(32,47,62,.035) !important;
  }

  #tos-case-study .tos-screen-thumb{
    aspect-ratio:1.52/1 !important;
    border-radius:15px !important;
    margin-bottom:12px !important;
  }

  #tos-case-study .tos-screen-card-footer{
    min-height:68px !important;
    padding:10px 7px 0 !important;
  }

  #tos-case-study .tos-screen-card-footer strong{
    display:block !important;
    margin-bottom:7px !important;
    font-size:16px !important;
    line-height:1.35 !important;
  }

  #tos-case-study .tos-screen-card-footer small{
    display:block !important;
    color:#8c98a4 !important;
    font-size:10px !important;
    line-height:1.55 !important;
  }

  #tos-case-study .tos-screen-card-icon{
    width:40px !important;
    height:40px !important;
    right:14px !important;
    bottom:-16px !important;
    border-radius:13px !important;
    font-size:14px !important;
  }

  #tos-case-study .tos-screen-card.is-active{
    transform:translateY(-6px) !important;
    border-color:rgba(200,141,46,.74) !important;
    box-shadow:
      0 18px 42px rgba(113,78,20,.085),
      0 0 0 1px rgba(231,184,75,.10) inset !important;
  }

  #tos-case-study .tos-screen-card.is-active::after{
    width:16px !important;
    height:16px !important;
    bottom:-9px !important;
  }

  #tos-case-study .tos-screen-card.is-active .tos-screen-card-icon{
    box-shadow:
      0 10px 24px rgba(151,102,21,.20),
      0 0 0 4px rgba(231,184,75,.065) !important;
  }

  /* Put the cards and heading on a visually equal baseline like CRM */
  #tos-case-study .tos-screens-crm-tabs, #tos-case-study .tos-screens-crm-copy{
    align-self:center !important;
  }
}


/* =========================================================
   V36 — PORTED DIRECTLY FROM CRM SCREEN SHOWCASE
========================================================= */
#tos-case-study .screens-v33{
  position:relative;
  overflow:hidden;
  padding:108px 0 120px;
  background:
    radial-gradient(circle at 8% 16%,rgba(231,184,75,.075),transparent 25%),
    radial-gradient(circle at 92% 78%,rgba(23,53,90,.035),transparent 28%),
    linear-gradient(180deg,#fbfbfa 0%,#f7f5ef 48%,#fbfbfa 100%);
  color:#102744;
}
#tos-case-study .screens-v33::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  pointer-events:none;
  background-image:radial-gradient(rgba(200,141,46,.13) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent);
}
#tos-case-study .screens-v33-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
#tos-case-study .screens-v33-glow-a{width:280px;height:280px;left:-70px;top:25%;background:rgba(231,184,75,.10)}
#tos-case-study .screens-v33-glow-b{width:340px;height:340px;right:-80px;bottom:-60px;background:rgba(23,53,90,.055)}
#tos-case-study .screens-v33-wrap{position:relative;z-index:2}
#tos-case-study .screens-v33-head{display:grid;grid-template-columns:minmax(460px,.8fr) minmax(0,1.2fr);gap:42px;align-items:end;direction:rtl;margin-bottom:44px}
#tos-case-study .screens-v33-title{text-align:right;direction:rtl}
#tos-case-study .screens-v33-badge{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;background:rgba(231,184,75,.085);border:1px solid rgba(200,141,46,.22);color:#a97218;font-size:12px;font-weight:700;margin-bottom:17px}
#tos-case-study .screens-v33-title h2{margin:0 0 14px;color:#0c2441;font-size:clamp(46px,5vw,68px);line-height:1.05;letter-spacing:-1.6px}
#tos-case-study .screens-v33-title h2 span{background:linear-gradient(90deg,#d8a43c,#bd7e16);-webkit-background-clip:text;background-clip:text;color:transparent}
#tos-case-study .screens-v33-title p{margin:0;color:#657a90;font-size:17px;line-height:1.9;max-width:650px;margin-right:auto}
#tos-case-study .screens-v33-tabs{direction:rtl;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#tos-case-study .screen-showcase-card{position:relative;appearance:none;border:1px solid rgba(216,225,238,.95);background:rgba(255,255,255,.68);border-radius:22px;padding:12px 12px 16px;cursor:pointer;text-align:right;color:#132e4b;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease;box-shadow:0 12px 28px rgba(36,51,80,.04);overflow:visible}
#tos-case-study .screen-showcase-card::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid rgba(200,141,46,.42);border-bottom:1px solid rgba(200,141,46,.42);transform:translateX(-50%) rotate(45deg);opacity:0;transition:opacity .3s ease}
#tos-case-study .screen-showcase-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(37,55,85,.09)}
#tos-case-study .screen-showcase-card.active{background:#fff;border-color:rgba(200,141,46,.72);box-shadow:0 18px 42px rgba(155,103,22,.13),0 0 0 2px rgba(231,184,75,.08)}
#tos-case-study .screen-showcase-card.active::after{opacity:1}
#tos-case-study .showcase-thumb{display:block;height:100px;border-radius:14px;overflow:hidden;background:#f2f5fb;border:1px solid #e8edf5;margin-bottom:13px}
#tos-case-study .showcase-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .45s ease}
#tos-case-study .screen-showcase-card:hover .showcase-thumb img, #tos-case-study .screen-showcase-card.active .showcase-thumb img{transform:scale(1.035)}
#tos-case-study .showcase-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;margin:-28px 12px 8px 0;position:relative;background:linear-gradient(180deg,#d8a33c,#b97813);color:#fff;font-size:18px;box-shadow:0 10px 24px rgba(167,109,18,.22)}
#tos-case-study .screen-showcase-card b{display:block;font-size:15px;margin-bottom:5px}#tos-case-study .screen-showcase-card small{display:block;font-size:11px;color:#75879a;line-height:1.55}
#tos-case-study .screens-v33-stage{display:grid;grid-template-columns:280px minmax(0,1fr);gap:34px;align-items:center;direction:ltr}
#tos-case-study .screens-v33-benefits{display:grid;gap:18px;direction:rtl}
#tos-case-study .screens-v33-benefits article{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:center;padding:10px 0}
#tos-case-study .benefit-orb{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:25px;font-weight:800;border:1px solid rgba(255,255,255,.72);box-shadow:0 14px 30px rgba(38,58,90,.06)}
#tos-case-study .benefit-orb.purple{background:linear-gradient(145deg,#f0ebff,#e8e4ff);color:#b77d1f}#tos-case-study .benefit-orb.green{background:linear-gradient(145deg,#eaf8f1,#e2f5eb);color:#26936a}#tos-case-study .benefit-orb.amber{background:linear-gradient(145deg,#fff5e6,#fff0d7);color:#c8891f}#tos-case-study .benefit-orb.rose{background:linear-gradient(145deg,#eef3f8,#e6edf5);color:#17355a}
#tos-case-study .screens-v33-benefits b{display:block;font-size:20px;color:#132d4a;margin-bottom:5px}#tos-case-study .screens-v33-benefits p{margin:0;color:#70849a;font-size:13px;line-height:1.75}
#tos-case-study .screens-v33-preview-wrap{position:relative;min-width:0;padding:20px 18px 0}
#tos-case-study .screens-v33-preview-glow{position:absolute;inset:12% 9% 8%;background:radial-gradient(ellipse at center,rgba(231,184,75,.16),rgba(23,53,90,.06) 45%,transparent 72%);filter:blur(35px);z-index:0;pointer-events:none}
#tos-case-study .screens-v33-browser{position:relative;z-index:2;border-radius:28px;overflow:hidden;background:#fff;border:1px solid rgba(206,218,234,.95);box-shadow:0 34px 80px rgba(41,57,86,.17),0 0 0 5px rgba(255,255,255,.46),0 0 45px rgba(200,141,46,.09);transform:perspective(1500px) rotateX(.7deg) rotateY(-1.7deg);transform-origin:center;transition:transform .45s ease}
#tos-case-study .screens-v33-preview-wrap:hover .screens-v33-browser{transform:perspective(1500px) rotateX(0deg) rotateY(0deg) translateY(-3px)}
#tos-case-study .screens-v33-browser-top{height:48px;display:grid;grid-template-columns:120px 1fr 120px;align-items:center;gap:10px;padding:0 17px;background:linear-gradient(180deg,#f9fbfe,#f2f6fb);border-bottom:1px solid #e8eef5;color:#93a3b5;font-size:10px}
#tos-case-study .browser-dots{display:flex;gap:7px;direction:ltr}#tos-case-study .browser-dots span{width:8px;height:8px;border-radius:50%}#tos-case-study .browser-dots span:nth-child(1){background:#ff6767}#tos-case-study .browser-dots span:nth-child(2){background:#ffc855}#tos-case-study .browser-dots span:nth-child(3){background:#3acb7b}
#tos-case-study .browser-url{justify-self:center;width:min(360px,80%);background:#fff;border:1px solid #e5ebf3;border-radius:999px;padding:7px 15px;text-align:center;color:#a3b0bf}
#tos-case-study .browser-live{justify-self:end;display:flex;align-items:center;gap:6px}#tos-case-study .browser-live i{width:7px;height:7px;border-radius:50%;background:#33ca80;box-shadow:0 0 0 4px rgba(51,202,128,.10)}
#tos-case-study .screens-v33-media{position:relative;aspect-ratio:1910/867;background:#f6f8fc;overflow:hidden}
#tos-case-study .screens-v33-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;opacity:1;transform:scale(1);transition:opacity .24s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
#tos-case-study .screens-v33-media.is-switching img{opacity:.18;transform:scale(.985)}
#tos-case-study .screens-v33-loading{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.34) 44%,transparent 60%);transform:translateX(-110%)}
#tos-case-study .screens-v33-media.is-switching .screens-v33-loading{animation:v33Shimmer .5s ease}
@keyframes v33Shimmer{to{transform:translateX(110%)}}
#tos-case-study .screens-v33-caption{position:relative;z-index:3;display:flex;justify-content:space-between;gap:25px;align-items:flex-end;padding:22px 18px 4px;direction:rtl}
#tos-case-study .screens-v33-caption small{display:block;font-size:10px;letter-spacing:2.1px;color:#b57a1d;font-weight:800;margin-bottom:7px}#tos-case-study .screens-v33-caption h3{margin:0;font-size:28px;color:#112d4a}#tos-case-study .screens-v33-caption p{max-width:620px;margin:0;color:#5e748e;font-size:16px;line-height:2.02;text-align:right;font-weight:500}
@media(max-width:1180px){#tos-case-study .screens-v33-head{grid-template-columns:1fr;align-items:start}#tos-case-study .screens-v33-tabs{order:2}#tos-case-study .screens-v33-stage{grid-template-columns:1fr}#tos-case-study .screens-v33-benefits{grid-template-columns:repeat(4,1fr);order:2}#tos-case-study .screens-v33-benefits article{grid-template-columns:1fr;text-align:center}#tos-case-study .benefit-orb{margin-inline:auto}#tos-case-study .screens-v33-preview-wrap{order:1}#tos-case-study .screens-v33-title p{margin-right:0}}
@media(max-width:820px){#tos-case-study .screens-v33{padding:82px 0 90px}#tos-case-study .screens-v33-tabs{grid-template-columns:repeat(2,1fr)}#tos-case-study .screens-v33-title h2{font-size:44px}#tos-case-study .screens-v33-benefits{grid-template-columns:repeat(2,1fr)}#tos-case-study .screens-v33-browser-top{grid-template-columns:80px 1fr 80px}#tos-case-study .browser-live{font-size:0}#tos-case-study .screens-v33-caption{align-items:flex-start;flex-direction:column}#tos-case-study .screens-v33-caption p{max-width:none}}
@media(max-width:520px){#tos-case-study .screens-v33-tabs{grid-template-columns:1fr 1fr;gap:10px}#tos-case-study .showcase-thumb{height:72px}#tos-case-study .screen-showcase-card{padding:9px 9px 13px}#tos-case-study .screen-showcase-card.active{transform:translateY(-4px) scale(1.01)}#tos-case-study .showcase-icon{width:36px;height:36px;margin-top:-24px}#tos-case-study .screens-v33-benefits{grid-template-columns:1fr}#tos-case-study .screens-v33-benefits article{grid-template-columns:56px 1fr;text-align:right}#tos-case-study .benefit-orb{width:56px;height:56px}#tos-case-study .screens-v33-preview-wrap{padding-inline:0}#tos-case-study .screens-v33-browser{border-radius:20px}#tos-case-study .screens-v33-browser-top{height:40px;padding-inline:10px;grid-template-columns:64px 1fr 40px}#tos-case-study .browser-url{padding:5px 9px}#tos-case-study .screens-v33-caption{padding-inline:4px}#tos-case-study .screens-v33-caption h3{font-size:22px}#tos-case-study .screens-v33-caption p{font-size:14px;line-height:1.9}}

#tos-case-study .screens-v33-tabs{
  align-items:stretch;
}

#tos-case-study .screen-showcase-card{
  opacity:.72;
  transform:scale(.985);
  filter:saturate(.92);
}

#tos-case-study .screen-showcase-card .showcase-thumb{
  opacity:.78;
  transition:opacity .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

#tos-case-study .screen-showcase-card .showcase-thumb img{
  filter:saturate(.86) contrast(.97) brightness(.985);
}

#tos-case-study .screen-showcase-card b{
  color:#30465f;
  transition:color .3s ease, transform .3s ease;
}

#tos-case-study .screen-showcase-card small{
  color:#8a9aad;
  transition:color .3s ease;
}

#tos-case-study .screen-showcase-card:hover{
  opacity:.92;
  transform:translateY(-4px) scale(1);
  filter:none;
}

#tos-case-study .screen-showcase-card.active{
  opacity:1;
  filter:none;
  transform:translateY(-12px) scale(1.075);
  z-index:8;
  border:2px solid #d09a32;
  background:linear-gradient(180deg,#ffffff 0%,#f8f7ff 100%);
  box-shadow:
    0 26px 56px rgba(169,111,17,.17),
    0 0 0 5px rgba(231,184,75,.08),
    0 0 34px rgba(200,141,46,.10);
}

#tos-case-study .screen-showcase-card.active::before{
  opacity:1;
  background:linear-gradient(180deg,rgba(231,184,75,.09),rgba(255,255,255,0) 54%);
}

#tos-case-study .screen-showcase-card.active::after{
  bottom:-10px;
  width:17px;
  height:17px;
  border-right:2px solid #d09a32;
  border-bottom:2px solid #d09a32;
  background:#f8f7ff;
}

#tos-case-study .screen-showcase-card.active .showcase-thumb{
  opacity:1;
  border:1.5px solid rgba(200,141,46,.58);
  box-shadow:0 16px 30px rgba(200,141,46,.12);
  transform:translateY(-2px);
}

#tos-case-study .screen-showcase-card.active .showcase-thumb img{
  filter:saturate(1.08) contrast(1.04) brightness(1.015);
  transform:scale(1.055);
}

#tos-case-study .screen-showcase-card.active .showcase-icon{
  transform:scale(1.14);
  background:linear-gradient(180deg,#d19b34,#b87814);
  box-shadow:
    0 16px 28px rgba(165,106,17,.25),
    0 0 0 5px rgba(231,184,75,.08);
}

#tos-case-study .screen-showcase-card.active b{
  color:#0c2949;
  font-weight:800;
  transform:translateY(-1px);
}

#tos-case-study .screen-showcase-card.active small{
  color:#5f728b;
  font-weight:500;
}

@media(max-width:820px){
  #tos-case-study .screen-showcase-card.active{
    transform:translateY(-7px) scale(1.035);
  }
}

@media(max-width:520px){
  #tos-case-study .screen-showcase-card{
    opacity:.82;
    transform:none;
  }
  #tos-case-study .screen-showcase-card.active{
    transform:translateY(-4px) scale(1.02);
    box-shadow:
      0 18px 38px rgba(101,86,255,.2),
      0 0 0 3px rgba(231,184,75,.08);
  }
}


#tos-case-study .screens-v33{
  --showcase-x: 72%;
  --showcase-y: 58%;
}
#tos-case-study .screens-v33-head, #tos-case-study .screens-v33-stage{
  position:relative;
  z-index:3;
}

/* Active tab now feels like a live selector without changing the layout. */
#tos-case-study .screen-showcase-card{
  isolation:isolate;
}
#tos-case-study .screen-showcase-card .showcase-thumb{
  position:relative;
}
#tos-case-study .screen-showcase-card .showcase-thumb::after{
  content:"";
  position:absolute;
  left:-35%;
  top:-30%;
  width:24%;
  height:160%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-15deg);
  opacity:0;
  pointer-events:none;
}
#tos-case-study .screen-showcase-card.active .showcase-thumb::after{
  animation:v81ThumbSheen 2.9s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes v81ThumbSheen{
  0%,18%{left:-40%;opacity:0}
  28%{opacity:.72}
  54%{left:120%;opacity:0}
  100%{left:120%;opacity:0}
}

/* Preview becomes the cinematic focal point. */
#tos-case-study .screens-v33-preview-wrap{
  perspective:1400px;
  isolation:isolate;
}
#tos-case-study .screens-v33-preview-glow{
  transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .6s ease,filter .6s ease;
  transform:translate3d(var(--v81-glow-x,0),var(--v81-glow-y,0),0) scale(1.05);
  opacity:.92;
}
#tos-case-study .screens-v81-orbit{
  position:absolute;
  z-index:0;
  width:72%;
  aspect-ratio:1.8/1;
  left:15%;
  top:14%;
  border:1px solid rgba(200,141,46,.12);
  border-radius:50%;
  transform:rotate(-7deg);
  pointer-events:none;
  opacity:.66;
  animation:v81OrbitBreath 7s ease-in-out infinite;
}
#tos-case-study .screens-v81-orbit::before, #tos-case-study .screens-v81-orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
}
#tos-case-study .screens-v81-orbit::before{
  width:10px;height:10px;
  left:12%;top:16%;
  background:#d19a33;
  box-shadow:0 0 22px rgba(200,141,46,.34);
  animation:v81OrbitDot 5.4s ease-in-out infinite;
}
#tos-case-study .screens-v81-orbit::after{
  width:7px;height:7px;
  right:11%;bottom:17%;
  background:#4a6f94;
  box-shadow:0 0 18px rgba(23,53,90,.28);
  animation:v81OrbitDot 5.4s ease-in-out infinite reverse;
}
#tos-case-study .screens-v81-spotlight{
  position:absolute;
  z-index:1;
  width:260px;height:260px;
  left:var(--showcase-x);
  top:var(--showcase-y);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(231,184,75,.14) 0%,rgba(23,53,90,.055) 38%,transparent 72%);
  filter:blur(22px);
  pointer-events:none;
  transition:left .8s cubic-bezier(.2,.8,.2,1),top .8s cubic-bezier(.2,.8,.2,1),opacity .45s ease;
  opacity:.72;
}
@keyframes v81OrbitBreath{
  0%,100%{transform:rotate(-7deg) scale(.99);opacity:.48}
  50%{transform:rotate(-4deg) scale(1.035);opacity:.8}
}
@keyframes v81OrbitDot{
  0%,100%{transform:translate(0,0) scale(.8);opacity:.45}
  50%{transform:translate(14px,-8px) scale(1.2);opacity:1}
}

#tos-case-study .screens-v33-browser{
  will-change:transform,box-shadow;
  transition:transform .7s cubic-bezier(.2,.75,.2,1),box-shadow .65s ease;
}
#tos-case-study .screens-v33.is-showcase-live .screens-v33-browser{
  animation:v81BrowserFloat 6.6s ease-in-out infinite;
}
@keyframes v81BrowserFloat{
  0%,100%{transform:perspective(1500px) rotateX(.45deg) rotateY(-1.35deg) translateY(0)}
  50%{transform:perspective(1500px) rotateX(.05deg) rotateY(-.35deg) translateY(-6px)}
}

/* A subtle scan line gives the preview a live-product feel. */
#tos-case-study .screens-v33-media::after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;right:0;
  height:2px;
  top:-5%;
  background:linear-gradient(90deg,transparent 4%,rgba(231,184,75,.045) 20%,rgba(200,141,46,.28) 50%,rgba(23,53,90,.04) 80%,transparent 96%);
  box-shadow:0 0 18px rgba(108,91,255,.14);
  pointer-events:none;
  opacity:0;
}
#tos-case-study .screens-v33.is-showcase-live .screens-v33-media::after{
  animation:v81Scan 5.6s ease-in-out infinite 1s;
}
@keyframes v81Scan{
  0%,10%{top:-5%;opacity:0}
  18%{opacity:.8}
  68%{top:103%;opacity:.28}
  74%,100%{top:103%;opacity:0}
}

/* Main screenshot switches with a soft cinematic zoom instead of a flat fade. */
#tos-case-study .screens-v33-media img{
  transform-origin:50% 35%;
  transition:opacity .28s ease,transform .8s cubic-bezier(.2,.75,.2,1),filter .55s ease;
}
#tos-case-study .screens-v33-media.is-switching img{
  opacity:.12;
  transform:scale(1.035) translateY(5px);
  filter:blur(1.2px) saturate(.88);
}
#tos-case-study .screens-v33-media.v81-settled img{
  animation:v81ImageSettle .8s cubic-bezier(.16,.84,.24,1) both;
}
@keyframes v81ImageSettle{
  0%{transform:scale(1.035) translateY(7px);filter:saturate(.9)}
  100%{transform:scale(1);filter:saturate(1)}
}

/* Caption responds to every selected screen. */
#tos-case-study .screens-v33-caption.v81-caption-pulse > *{
  animation:v81CaptionIn .62s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33-caption.v81-caption-pulse > p{animation-delay:.05s}
@keyframes v81CaptionIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* Left benefit list synchronizes with the selected product screen. */
#tos-case-study .screens-v33-benefits article{
  position:relative;
  border-radius:20px;
  transition:transform .45s cubic-bezier(.2,.75,.2,1),opacity .4s ease,background .4s ease,box-shadow .4s ease;
  opacity:.62;
}
#tos-case-study .screens-v33-benefits article::before{
  content:"";
  position:absolute;
  inset:2px -8px;
  border-radius:20px;
  background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.18));
  border:1px solid rgba(200,141,46,.09);
  opacity:0;
  transform:scale(.98);
  transition:opacity .4s ease,transform .4s ease;
  z-index:-1;
}
#tos-case-study .screens-v33-benefits article.is-benefit-active{
  opacity:1;
  transform:translateX(8px);
}
#tos-case-study .screens-v33-benefits article.is-benefit-active::before{
  opacity:1;
  transform:scale(1);
  box-shadow:0 16px 38px rgba(61,77,112,.06);
}
#tos-case-study .screens-v33-benefits article.is-benefit-active .benefit-orb{
  animation:v81OrbPulse .72s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes v81OrbPulse{
  0%{transform:scale(.9);box-shadow:0 0 0 0 rgba(200,141,46,.13)}
  55%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(107,91,255,0)}
  100%{transform:scale(1)}
}

/* Autoplay progress on the active card: quiet, premium, informative. */
#tos-case-study .screen-showcase-card .showcase-thumb::before{
  content:"";
  position:absolute;
  z-index:5;
  right:0;bottom:0;
  height:3px;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#d19b34,#b97716);
  box-shadow:0 0 14px rgba(200,141,46,.20);
  opacity:0;
}
#tos-case-study .screens-v33.is-autoplaying .screen-showcase-card.active .showcase-thumb::before{
  opacity:1;
  animation:v81TabProgress 4.6s linear forwards;
}
@keyframes v81TabProgress{
  from{width:0}
  to{width:100%}
}

/* Section entry reveal without changing its final layout. */
#tos-case-study .screens-v33.screens-v81-motion .screens-v33-title, #tos-case-study .screens-v33.screens-v81-motion .screen-showcase-card, #tos-case-study .screens-v33.screens-v81-motion .screens-v33-preview-wrap, #tos-case-study .screens-v33.screens-v81-motion .screens-v33-benefits article{
  opacity:0;
}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screens-v33-title{
  animation:v81Entry .72s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screen-showcase-card{
  animation:v81CardEntry .65s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screen-showcase-card:nth-child(1){animation-delay:.10s}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screen-showcase-card:nth-child(2){animation-delay:.17s}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screen-showcase-card:nth-child(3){animation-delay:.24s}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screen-showcase-card:nth-child(4){animation-delay:.31s}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screens-v33-preview-wrap{
  animation:v81PreviewEntry .88s cubic-bezier(.16,.84,.24,1) .22s both;
}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screens-v33-benefits article{
  animation:v81BenefitEntry .55s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screens-v33-benefits article:nth-child(1){animation-delay:.34s}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screens-v33-benefits article:nth-child(2){animation-delay:.41s}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screens-v33-benefits article:nth-child(3){animation-delay:.48s}
#tos-case-study .screens-v33.screens-v81-motion.is-showcase-live .screens-v33-benefits article:nth-child(4){animation-delay:.55s}
@keyframes v81Entry{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}


/* Selected card: unmistakable but not constantly animated. */
#tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card{
  opacity:.78;
  transform:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
#tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card:hover{
  opacity:.95;
  transform:translateY(-4px);
}
#tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card.active{
  opacity:1;
  transform:translateY(-7px) scale(1.025);
  border-color:rgba(200,141,46,.82);
  box-shadow:0 20px 45px rgba(155,103,22,.12),0 0 0 2px rgba(231,184,75,.08);
}
#tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card.v83-card-flash .showcase-icon{
  animation:v83IconPop .48s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes v83IconPop{
  0%{transform:scale(.88)}
  55%{transform:scale(1.12)}
  100%{transform:scale(1.04)}
}

/* Benefit synchronization is a single accent sweep, not a persistent bounce. */
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article{
  opacity:.7;
  transform:none;
  overflow:hidden;
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article.is-benefit-active{
  opacity:1;
  transform:translateX(5px);
  background:rgba(255,255,255,.38);
  box-shadow:0 14px 34px rgba(49,64,96,.045);
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article::after{
  content:"";
  position:absolute;
  right:-30%;
  top:0;
  width:30%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(200,141,46,.09),transparent);
  opacity:0;
  pointer-events:none;
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article.v83-benefit-flash::after{
  animation:v83BenefitSweep .58s ease-out both;
}
@keyframes v83BenefitSweep{
  0%{right:-32%;opacity:0}
  28%{opacity:1}
  100%{right:105%;opacity:0}
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article.is-benefit-active .benefit-orb{
  animation:none !important;
  transform:scale(1.04);
}

/* Caption changes feel connected to the chosen screen. */
#tos-case-study .screens-v33-caption.v83-caption-in > *{
  animation:v83CaptionIn .48s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33-caption.v83-caption-in > p{animation-delay:.045s}
@keyframes v83CaptionIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Entry animation happens only when the section enters the viewport. */
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-title, #tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-preview-wrap, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article{
  opacity:0;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-title{
  animation:v83EntryTitle .65s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card{
  animation:v83EntryCard .55s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card:nth-child(1){animation-delay:.08s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card:nth-child(2){animation-delay:.14s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card:nth-child(3){animation-delay:.20s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card:nth-child(4){animation-delay:.26s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-preview-wrap{
  animation:v83EntryPreview .76s cubic-bezier(.16,.84,.24,1) .16s both;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-benefits article{
  animation:v83EntryBenefit .45s cubic-bezier(.2,.8,.2,1) both;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-benefits article:nth-child(1){animation-delay:.26s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-benefits article:nth-child(2){animation-delay:.32s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-benefits article:nth-child(3){animation-delay:.38s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-benefits article:nth-child(4){animation-delay:.44s}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active{opacity:1;}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-benefits article.is-benefit-active{opacity:1;}
@keyframes v83EntryTitle{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes v83EntryCard{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:.78;transform:none}}
@keyframes v83EntryPreview{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v83EntryBenefit{from{opacity:0;transform:translateX(-10px)}to{opacity:.7;transform:none}}

@media(max-width:820px){
  #tos-case-study .screens-v33.screens-v83-motion .screens-v33-preview-wrap::before, #tos-case-study .screens-v33.screens-v83-motion .screens-v81-spotlight{display:none}
  #tos-case-study .screens-v33.screens-v83-motion .screens-v33-browser{transform:none!important}
  #tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card.active{transform:translateY(-4px) scale(1.01)}
}
@media(prefers-reduced-motion:reduce){
  #tos-case-study .screens-v33.screens-v83-motion .screens-v33-title, #tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-preview-wrap, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article{opacity:1!important;animation:none!important;transform:none!important}
  #tos-case-study .screens-v33.screens-v83-motion .screens-v33-media img{transition:none!important;clip-path:none!important}
  #tos-case-study .screens-v33.screens-v83-motion .screens-v33-preview-wrap::before, #tos-case-study .screens-v33.screens-v83-motion .screens-v81-spotlight{display:none!important}
}

/* ===== V84: visible premium idle motion for screens showcase ===== */
@keyframes v84PreviewFloat {
  0%,100% { transform:translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform:translateY(-7px) rotateX(.22deg) rotateY(-.28deg); }
}
@keyframes v84GlowDrift {
  0%,100% { transform:translate(-50%,-50%) scale(.94); opacity:.52; }
  35% { transform:translate(-45%,-54%) scale(1.05); opacity:.82; }
  68% { transform:translate(-55%,-46%) scale(1.00); opacity:.66; }
}
@keyframes v84ActiveCardBreath {
  0%,100% {
    transform:translateY(-7px) scale(1.025);
    box-shadow:0 20px 45px rgba(155,103,22,.12),0 0 0 2px rgba(231,184,75,.08);
  }
  50% {
    transform:translateY(-10px) scale(1.035);
    box-shadow:0 27px 58px rgba(91,79,255,.21),0 0 0 3px rgba(103,89,255,.11);
  }
}
@keyframes v84ActiveIconPulse {
  0%,100% { transform:scale(1.03); filter:drop-shadow(0 0 0 rgba(105,88,255,0)); }
  50% { transform:scale(1.11); filter:drop-shadow(0 9px 14px rgba(105,88,255,.22)); }
}
@keyframes v84BenefitPulse {
  0%,72%,100% { transform:translateY(0) scale(1); box-shadow:none; }
  82% { transform:translateY(-4px) scale(1.045); box-shadow:0 12px 24px rgba(200,141,46,.10); }
  92% { transform:translateY(0) scale(1); box-shadow:none; }
}
@keyframes v84SoftSweep {
  0%,72% { left:-35%; opacity:0; }
  79% { opacity:.55; }
  92% { left:112%; opacity:0; }
  100% { left:112%; opacity:0; }
}

/* Keep the preview alive after the entry reveal settles. */
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-browser{
  animation:v84PreviewFloat 6.4s ease-in-out infinite !important;
  transform-origin:50% 62%;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-preview-wrap::before{
  animation:v84GlowDrift 7.6s ease-in-out infinite;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active{
  animation:v84ActiveCardBreath 4.9s ease-in-out infinite !important;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active .showcase-icon{
  animation:v84ActiveIconPulse 3.8s ease-in-out infinite;
}

/* Quiet staggered life in the left-side benefits. */
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article .benefit-orb{
  animation:v84BenefitPulse 7.2s ease-in-out infinite;
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(1) .benefit-orb{animation-delay:0s}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(2) .benefit-orb{animation-delay:1.05s}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(3) .benefit-orb{animation-delay:2.1s}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(4) .benefit-orb{animation-delay:3.15s}

/* A very subtle moving light across the big preview — no scan-line look. */
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-browser::after{
  content:"";
  position:absolute;
  z-index:5;
  top:-8%;
  bottom:-8%;
  left:-35%;
  width:16%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),rgba(231,184,75,.04),transparent);
  transform:skewX(-12deg);
  animation:v84SoftSweep 8.8s ease-in-out infinite;
}

/* Hover pauses the float and gives the user direct control. */
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-preview-wrap:hover .screens-v33-browser{
  animation-play-state:paused !important;
}
#tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card.active:hover{
  animation-play-state:paused !important;
  transform:translateY(-10px) scale(1.04);
}

@media(max-width:820px){
  #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-browser{
    animation:v84PreviewFloat 6.8s ease-in-out infinite !important;
  }
  #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active{
    animation:v84ActiveCardBreath 5.4s ease-in-out infinite !important;
  }
}
@media(prefers-reduced-motion:reduce){
  #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-browser, #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article .benefit-orb, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-browser::after, #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-preview-wrap::before{
    animation:none !important;
  }
}

/* ===== V85: stronger visible premium motion for screens showcase ===== */
@keyframes v85PreviewMotion {
  0%,100% {
    transform:translateY(2px) rotateX(.15deg) rotateY(-.35deg) scale(1);
    filter:drop-shadow(0 20px 32px rgba(115,82,29,.045));
  }
  28% {
    transform:translateY(-11px) rotateX(.7deg) rotateY(.7deg) scale(1.012);
    filter:drop-shadow(0 28px 42px rgba(115,82,29,.07));
  }
  58% {
    transform:translateY(-17px) rotateX(-.35deg) rotateY(-.8deg) scale(1.018);
    filter:drop-shadow(0 34px 54px rgba(115,82,29,.10));
  }
  82% {
    transform:translateY(-6px) rotateX(.35deg) rotateY(.35deg) scale(1.008);
  }
}
@keyframes v85ActiveCardPulse {
  0%,100% {
    transform:translateY(-7px) scale(1.035);
    box-shadow:0 22px 48px rgba(155,103,22,.13),0 0 0 2px rgba(231,184,75,.09);
  }
  50% {
    transform:translateY(-15px) scale(1.075);
    box-shadow:0 34px 72px rgba(155,103,22,.18),0 0 0 4px rgba(231,184,75,.13),0 0 38px rgba(200,141,46,.11);
  }
}
@keyframes v85IconPop {
  0%,100% { transform:translateY(0) scale(1.05) rotate(0deg); }
  45% { transform:translateY(-6px) scale(1.18) rotate(-3deg); }
  65% { transform:translateY(-2px) scale(1.12) rotate(2deg); }
}
@keyframes v85BenefitWave {
  0%,72%,100% { transform:translateX(0) scale(1); opacity:.84; }
  80% { transform:translateX(10px) scale(1.035); opacity:1; }
  88% { transform:translateX(3px) scale(1.012); opacity:.95; }
}
@keyframes v85OrbWave {
  0%,72%,100% { transform:scale(1) rotate(0deg); box-shadow:none; }
  80% { transform:scale(1.18) rotate(-5deg); box-shadow:0 14px 28px rgba(200,141,46,.14); }
  88% { transform:scale(1.08) rotate(3deg); }
}
@keyframes v85GlowOrbit {
  0% { transform:translate(-52%,-48%) scale(.92) rotate(0deg); opacity:.45; }
  25% { transform:translate(-43%,-56%) scale(1.09) rotate(90deg); opacity:.82; }
  50% { transform:translate(-57%,-52%) scale(1.15) rotate(180deg); opacity:.66; }
  75% { transform:translate(-47%,-43%) scale(1.04) rotate(270deg); opacity:.86; }
  100% { transform:translate(-52%,-48%) scale(.92) rotate(360deg); opacity:.45; }
}
@keyframes v85BigSheen {
  0%,64% { left:-42%; opacity:0; }
  70% { opacity:.16; }
  82% { opacity:.46; }
  94% { left:118%; opacity:0; }
  100% { left:118%; opacity:0; }
}
@keyframes v85HeadingBreath {
  0%,100% { transform:translateY(0); filter:drop-shadow(0 0 0 rgba(200,141,46,0)); }
  50% { transform:translateY(-5px); filter:drop-shadow(0 12px 18px rgba(200,141,46,.075)); }
}

#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-browser{
  animation:v85PreviewMotion 4.6s cubic-bezier(.45,.05,.2,1) infinite !important;
  transform-origin:50% 62%;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active{
  animation:v85ActiveCardPulse 3.5s ease-in-out infinite !important;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active .showcase-icon{
  animation:v85IconPop 3.5s ease-in-out infinite !important;
}
#tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-preview-wrap::before{
  animation:v85GlowOrbit 5.4s ease-in-out infinite !important;
  filter:blur(42px);
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article{
  animation:v85BenefitWave 5.8s ease-in-out infinite;
  will-change:transform,opacity;
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article .benefit-orb{
  animation:v85OrbWave 5.8s ease-in-out infinite !important;
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(1), #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(1) .benefit-orb{animation-delay:0s}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(2), #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(2) .benefit-orb{animation-delay:.78s}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(3), #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(3) .benefit-orb{animation-delay:1.56s}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(4), #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article:nth-child(4) .benefit-orb{animation-delay:2.34s}

#tos-case-study .screens-v33.screens-v83-motion .screens-v33-title h2{
  animation:v85HeadingBreath 4.8s ease-in-out infinite;
}
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-browser::after{
  width:24%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),rgba(200,141,46,.085),transparent);
  animation:v85BigSheen 6.2s ease-in-out infinite !important;
}

/* Keep direct interaction readable. */
#tos-case-study .screens-v33.screens-v83-motion .screens-v33-preview-wrap:hover .screens-v33-browser{
  animation-play-state:paused !important;
}
#tos-case-study .screens-v33.screens-v83-motion .screen-showcase-card.active:hover{
  animation-play-state:paused !important;
  transform:translateY(-14px) scale(1.07);
}

@media(max-width:820px){
  #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-browser{
    animation-duration:5.2s !important;
  }
  #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article{
    animation:none;
    opacity:1;
  }
}
@media(prefers-reduced-motion:reduce){
  #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-browser, #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active, #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screen-showcase-card.active .showcase-icon, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-benefits article .benefit-orb, #tos-case-study .screens-v33.screens-v83-motion.is-showcase-live .screens-v33-preview-wrap::before, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-title h2, #tos-case-study .screens-v33.screens-v83-motion .screens-v33-browser::after{
    animation:none !important;
  }
}


/* ===== V36 TOS: EXACT CRM SCREEN SHOWCASE GEOMETRY ===== */
#tos-case-study .tos-screens-exact .screens-v33-wrap{
  width:min(1180px,calc(100% - 56px)) !important;
  margin-inline:auto !important;
}

#tos-case-study .tos-screens-exact .benefit-orb.purple{
  background:linear-gradient(145deg,#fff7e9,#f8ecd3);
  color:#b77d1f;
}
#tos-case-study .tos-screens-exact .benefit-orb.green{
  background:linear-gradient(145deg,#eaf8f1,#e2f5eb);
  color:#26936a;
}
#tos-case-study .tos-screens-exact .benefit-orb.amber{
  background:linear-gradient(145deg,#fff6e7,#f9ead0);
  color:#c8891f;
}
#tos-case-study .tos-screens-exact .benefit-orb.rose{
  background:linear-gradient(145deg,#eef3f8,#e6edf5);
  color:#17355a;
}

/* Force TOS theme while retaining CRM's exact spacing and card geometry. */
#tos-case-study .tos-screens-exact .screens-v33-badge{
  background:rgba(231,184,75,.085) !important;
  border-color:rgba(200,141,46,.22) !important;
  color:#a97218 !important;
}
#tos-case-study .tos-screens-exact .screens-v33-title h2 span{
  background:linear-gradient(90deg,#d8a43c,#bd7e16) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
#tos-case-study .tos-screens-exact .showcase-icon{
  background:linear-gradient(180deg,#d8a33c,#b97813) !important;
  box-shadow:0 10px 24px rgba(167,109,18,.22) !important;
}
#tos-case-study .tos-screens-exact .screen-showcase-card.active{
  border-color:rgba(200,141,46,.82) !important;
  background:linear-gradient(180deg,#fff 0%,#fffaf0 100%) !important;
  box-shadow:0 20px 45px rgba(155,103,22,.12),0 0 0 2px rgba(231,184,75,.08) !important;
}
#tos-case-study .tos-screens-exact .screen-showcase-card.active::after{
  border-right-color:#d09a32 !important;
  border-bottom-color:#d09a32 !important;
  background:#fffaf0 !important;
}
#tos-case-study .tos-screens-exact .screen-showcase-card.active .showcase-icon{
  background:linear-gradient(180deg,#d19b34,#b87814) !important;
}
#tos-case-study .tos-screens-exact .screens-v33-preview-glow{
  background:radial-gradient(ellipse at center,rgba(231,184,75,.16),rgba(23,53,90,.06) 45%,transparent 72%) !important;
}
#tos-case-study .tos-screens-exact .screens-v81-spotlight{
  background:radial-gradient(circle,rgba(231,184,75,.14) 0%,rgba(23,53,90,.055) 38%,transparent 72%) !important;
}
#tos-case-study .tos-screens-exact .screens-v81-orbit{
  border-color:rgba(200,141,46,.12) !important;
}
#tos-case-study .tos-screens-exact .screens-v81-orbit::before{
  background:#d19a33 !important;
  box-shadow:0 0 22px rgba(200,141,46,.34) !important;
}
#tos-case-study .tos-screens-exact .screens-v81-orbit::after{
  background:#4a6f94 !important;
  box-shadow:0 0 18px rgba(23,53,90,.28) !important;
}

@media(max-width:820px){
  #tos-case-study .tos-screens-exact .screens-v33-wrap{
    width:min(100% - 30px,1180px) !important;
  }
}


/* =========================================================
   V37 — FINAL RETOUCH: TITLE RHYTHM + SEMANTIC ICONS
========================================================= */
#tos-case-study .tos-screens-exact .screens-v33-title h2{
  line-height:1.08 !important;
  letter-spacing:-1.55px !important;
}

#tos-case-study .tos-screens-exact .showcase-icon svg{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#tos-case-study .tos-screens-exact .screen-showcase-card[data-screen="projects"] .showcase-icon{
  background:linear-gradient(180deg,#d8a33c,#b97813) !important;
}

#tos-case-study .tos-screens-exact .screen-showcase-card[data-screen="tasks"] .showcase-icon{
  background:linear-gradient(180deg,#d8a33c,#b97813) !important;
}

#tos-case-study .tos-screens-exact .screen-showcase-card[data-screen="workspace"] .showcase-icon{
  background:linear-gradient(180deg,#d8a33c,#b97813) !important;
}

#tos-case-study .tos-screens-exact .screen-showcase-card[data-screen="sla"] .showcase-icon{
  background:linear-gradient(180deg,#d8a33c,#b97813) !important;
}

@media(max-width:820px){
  #tos-case-study .tos-screens-exact .screens-v33-title h2{
    line-height:1.08 !important;
  }
  #tos-case-study .tos-screens-exact .showcase-icon svg{
    width:18px;
    height:18px;
  }
}


/* =========================================================
   V39 — LOWER KEY-SCREENS AREA: EXACT CRM GEOMETRY
   TOS theme/content only
========================================================= */

/* Keep the headline adjustment the user selected */
#tos-case-study .tos-screens-exact .screens-v33-title h2{
  line-height:1.4 !important;
}

/* Exact CRM lower-stage proportions */
#tos-case-study .tos-screens-exact .screens-v33-stage{
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:34px !important;
  align-items:center !important;
  direction:ltr !important;
}

#tos-case-study .tos-screens-exact .screens-v33-benefits{
  display:grid !important;
  gap:18px !important;
  direction:rtl !important;
}

#tos-case-study .tos-screens-exact .screens-v33-benefits article{
  position:relative !important;
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  gap:14px !important;
  align-items:center !important;
  padding:10px 0 !important;
  border-radius:20px !important;
  opacity:.70 !important;
  overflow:hidden !important;
  transition:
    transform .45s cubic-bezier(.2,.75,.2,1),
    opacity .4s ease,
    background .4s ease,
    box-shadow .4s ease !important;
}

/* Active feature block exactly like CRM, recolored for TOS */
#tos-case-study .tos-screens-exact .screens-v33-benefits article::before{
  content:"" !important;
  position:absolute !important;
  inset:2px -8px !important;
  border-radius:20px !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.78),
    rgba(255,251,245,.22)
  ) !important;
  border:1px solid rgba(200,141,46,.10) !important;
  opacity:0 !important;
  transform:scale(.98) !important;
  transition:opacity .4s ease,transform .4s ease !important;
  z-index:-1 !important;
}

#tos-case-study .tos-screens-exact .screens-v33-benefits article.is-benefit-active{
  opacity:1 !important;
  transform:translateX(5px) !important;
  background:rgba(255,255,255,.38) !important;
  box-shadow:0 14px 34px rgba(49,64,96,.045) !important;
}

#tos-case-study .tos-screens-exact .screens-v33-benefits article.is-benefit-active::before{
  opacity:1 !important;
  transform:scale(1) !important;
  box-shadow:0 16px 38px rgba(61,77,112,.05) !important;
}

#tos-case-study .tos-screens-exact .benefit-orb{
  width:62px !important;
  height:62px !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;
  font-size:25px !important;
  font-weight:800 !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 14px 30px rgba(38,58,90,.06) !important;
}

#tos-case-study .tos-screens-exact .benefit-orb.purple{
  background:linear-gradient(145deg,#fff8e9,#f7ecd3) !important;
  color:#b77d1f !important;
}
#tos-case-study .tos-screens-exact .benefit-orb.green{
  background:linear-gradient(145deg,#eaf8f1,#e2f5eb) !important;
  color:#26936a !important;
}
#tos-case-study .tos-screens-exact .benefit-orb.amber{
  background:linear-gradient(145deg,#fff6e7,#f9ead0) !important;
  color:#c8891f !important;
}
#tos-case-study .tos-screens-exact .benefit-orb.rose{
  background:linear-gradient(145deg,#eef3f8,#e6edf5) !important;
  color:#17355a !important;
}

#tos-case-study .tos-screens-exact .screens-v33-benefits b{
  display:block !important;
  margin-bottom:5px !important;
  color:#132d4a !important;
  font-size:20px !important;
}

#tos-case-study .tos-screens-exact .screens-v33-benefits p{
  margin:0 !important;
  color:#70849a !important;
  font-size:13px !important;
  line-height:1.75 !important;
}

/* Exact CRM preview spacing and browser frame */
#tos-case-study .tos-screens-exact .screens-v33-preview-wrap{
  position:relative !important;
  min-width:0 !important;
  padding:20px 18px 0 !important;
}

#tos-case-study .tos-screens-exact .screens-v33-preview-glow{
  position:absolute !important;
  inset:12% 9% 8% !important;
  z-index:0 !important;
  pointer-events:none !important;
  filter:blur(35px) !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(231,184,75,.16),
      rgba(23,53,90,.055) 45%,
      transparent 72%
    ) !important;
}

#tos-case-study .tos-screens-exact .screens-v33-browser{
  position:relative !important;
  z-index:2 !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#fff !important;
  border:1px solid rgba(206,218,234,.95) !important;
  box-shadow:
    0 34px 80px rgba(41,57,86,.17),
    0 0 0 5px rgba(255,255,255,.46),
    0 0 45px rgba(200,141,46,.09) !important;
  transform:
    perspective(1500px)
    rotateX(.7deg)
    rotateY(-1.7deg) !important;
  transform-origin:center !important;
  transition:transform .45s ease !important;
}

#tos-case-study .tos-screens-exact .screens-v33-preview-wrap:hover .screens-v33-browser{
  transform:
    perspective(1500px)
    rotateX(0deg)
    rotateY(0deg)
    translateY(-3px) !important;
}

#tos-case-study .tos-screens-exact .screens-v33-browser-top{
  height:48px !important;
  display:grid !important;
  grid-template-columns:120px 1fr 120px !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 17px !important;
  background:linear-gradient(180deg,#f9fbfe,#f2f6fb) !important;
  border-bottom:1px solid #e8eef5 !important;
  color:#93a3b5 !important;
  font-size:10px !important;
}

#tos-case-study .tos-screens-exact .browser-dots{
  display:flex !important;
  gap:7px !important;
  direction:ltr !important;
}

#tos-case-study .tos-screens-exact .browser-dots span{
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
}

#tos-case-study .tos-screens-exact .browser-dots span:nth-child(1){background:#ff6767 !important;}
#tos-case-study .tos-screens-exact .browser-dots span:nth-child(2){background:#ffc855 !important;}
#tos-case-study .tos-screens-exact .browser-dots span:nth-child(3){background:#3acb7b !important;}

#tos-case-study .tos-screens-exact .browser-url{
  justify-self:center !important;
  width:min(360px,80%) !important;
  padding:7px 15px !important;
  border:1px solid #e5ebf3 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#a3b0bf !important;
  text-align:center !important;
}

#tos-case-study .tos-screens-exact .browser-live{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

#tos-case-study .tos-screens-exact .browser-live i{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:#33ca80 !important;
  box-shadow:0 0 0 4px rgba(51,202,128,.10) !important;
}

/* Exact CRM screen aspect ratio */
#tos-case-study .tos-screens-exact .screens-v33-media{
  position:relative !important;
  overflow:hidden !important;
  aspect-ratio:1910/867 !important;
  background:#f6f8fc !important;
}

#tos-case-study .tos-screens-exact .screens-v33-media img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:top center !important;
  opacity:1 !important;
  transform:scale(1) !important;
  transition:
    opacity .24s ease,
    transform .55s cubic-bezier(.2,.75,.2,1) !important;
}

#tos-case-study .tos-screens-exact .screens-v33-media.is-switching img{
  opacity:.18 !important;
  transform:scale(.985) !important;
}

/* Exact CRM caption proportions */
#tos-case-study .tos-screens-exact .screens-v33-caption{
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  gap:25px !important;
  padding:22px 18px 4px !important;
  direction:rtl !important;
}

#tos-case-study .tos-screens-exact .screens-v33-caption small{
  display:block !important;
  margin-bottom:7px !important;
  color:#b77d1f !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:2.1px !important;
}

#tos-case-study .tos-screens-exact .screens-v33-caption h3{
  margin:0 !important;
  color:#112d4a !important;
  font-size:28px !important;
}

#tos-case-study .tos-screens-exact .screens-v33-caption p{
  max-width:620px !important;
  margin:0 !important;
  color:#5e748e !important;
  font-size:16px !important;
  line-height:2.02 !important;
  text-align:right !important;
  font-weight:500 !important;
}

/* Same CRM synchronized highlight sweep */
#tos-case-study .tos-screens-exact.screens-v83-motion .screens-v33-benefits article::after{
  content:"" !important;
  position:absolute !important;
  right:-30% !important;
  top:0 !important;
  width:30% !important;
  height:100% !important;
  pointer-events:none !important;
  opacity:0 !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200,141,46,.10),
      transparent
    ) !important;
}

#tos-case-study .tos-screens-exact.screens-v83-motion
.screens-v33-benefits article.v83-benefit-flash::after{
  animation:v39BenefitSweep .58s ease-out both !important;
}

@keyframes v39BenefitSweep{
  0%{right:-32%;opacity:0}
  28%{opacity:1}
  100%{right:105%;opacity:0}
}

#tos-case-study .tos-screens-exact.screens-v83-motion
.screens-v33-benefits article.is-benefit-active .benefit-orb{
  animation:none !important;
  transform:scale(1.04) !important;
}

/* Keep CRM-like quiet floating preview */
#tos-case-study .tos-screens-exact.screens-v83-motion.is-showcase-live .screens-v33-browser{
  animation:v84PreviewFloat 6.4s ease-in-out infinite !important;
  transform-origin:50% 62% !important;
}

#tos-case-study .tos-screens-exact.screens-v83-motion
.screens-v33-preview-wrap:hover .screens-v33-browser{
  animation-play-state:paused !important;
}

/* Responsive behavior copied from CRM */
@media(max-width:1180px){
  #tos-case-study .tos-screens-exact .screens-v33-stage{
    grid-template-columns:1fr !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-benefits{
    grid-template-columns:repeat(4,1fr) !important;
    order:2 !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-benefits article{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }

  #tos-case-study .tos-screens-exact .benefit-orb{
    margin-inline:auto !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-preview-wrap{
    order:1 !important;
  }
}

@media(max-width:820px){
  #tos-case-study .tos-screens-exact .screens-v33-benefits{
    grid-template-columns:repeat(2,1fr) !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-browser-top{
    grid-template-columns:80px 1fr 80px !important;
  }

  #tos-case-study .tos-screens-exact .browser-live{
    font-size:0 !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-caption{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-caption p{
    max-width:none !important;
  }
}

@media(max-width:520px){
  #tos-case-study .tos-screens-exact .screens-v33-benefits{
    grid-template-columns:1fr !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-benefits article{
    grid-template-columns:56px 1fr !important;
    text-align:right !important;
  }

  #tos-case-study .tos-screens-exact .benefit-orb{
    width:56px !important;
    height:56px !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-preview-wrap{
    padding-inline:0 !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-browser{
    border-radius:20px !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-browser-top{
    height:40px !important;
    padding-inline:10px !important;
    grid-template-columns:64px 1fr 40px !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-caption{
    padding-inline:4px !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-caption h3{
    font-size:22px !important;
  }

  #tos-case-study .tos-screens-exact .screens-v33-caption p{
    font-size:14px !important;
    line-height:1.9 !important;
  }
}


/* =========================================================
   V40 — TOS OUTCOME + CTA + FINAL FORM
========================================================= */

#tos-case-study .tos-results{
  position:relative;
  overflow:hidden;
  padding:108px 0 72px;
  background:
    radial-gradient(circle at 14% 18%,rgba(231,184,75,.14),transparent 24%),
    radial-gradient(circle at 88% 72%,rgba(67,102,136,.10),transparent 28%),
    linear-gradient(180deg,#0b2238 0%,#081c30 100%);
}

#tos-case-study .tos-results::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(230,204,147,.12) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.38),transparent 72%);
  opacity:.16;
  pointer-events:none;
}

#tos-case-study .tos-results-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(22px);
}

#tos-case-study .tos-results-orb-one{
  width:320px;
  height:320px;
  left:-120px;
  top:90px;
  background:radial-gradient(circle,rgba(231,184,75,.17),transparent 70%);
}

#tos-case-study .tos-results-orb-two{
  width:360px;
  height:360px;
  right:-130px;
  bottom:30px;
  background:radial-gradient(circle,rgba(54,105,145,.13),transparent 70%);
}

#tos-case-study .tos-results-wrap{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 56px));
  margin-inline:auto;
}

#tos-case-study .tos-results-head{
  max-width:760px;
  margin:0 auto 46px;
  text-align:center;
}

#tos-case-study .tos-results-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
  color:#9eacb9;
  font-size:10px;
  font-weight:800;
  letter-spacing:2.5px;
}

#tos-case-study .tos-results-kicker span{
  width:38px;
  height:2px;
  background:linear-gradient(90deg,#e1b653,#b97813);
}

#tos-case-study .tos-results-head h2{
  margin:0 0 14px;
  color:#fff;
  font-size:48px;
  line-height:1.2;
}

#tos-case-study .tos-results-head p{
  margin:0;
  color:#b8c5d0;
  font-size:16px;
  line-height:1.95;
}

#tos-case-study .tos-results-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:50px;
  align-items:stretch;
}

#tos-case-study .tos-result-card{
  position:relative;
  min-height:230px;
  padding:24px 22px 22px;
  overflow:hidden;
  border:1px solid rgba(222,194,137,.13);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(24,49,75,.82),rgba(12,34,55,.88));
  box-shadow:
    0 22px 46px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

#tos-case-study .tos-result-card::after{
  content:"";
  position:absolute;
  right:-44px;
  bottom:-58px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(231,184,75,.13),transparent 70%);
  filter:blur(4px);
}

#tos-case-study .tos-result-card:hover{
  transform:translateY(-5px);
  border-color:rgba(231,184,75,.30);
  box-shadow:0 28px 58px rgba(0,0,0,.19);
}

#tos-case-study .tos-result-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border:1px solid rgba(231,184,75,.13);
  border-radius:17px;
  color:#e3b84f;
  background:rgba(231,184,75,.085);
}

#tos-case-study .tos-result-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#tos-case-study .tos-result-index{
  position:absolute;
  top:26px;
  left:22px;
  color:#61758a;
  font-size:10px;
  letter-spacing:1.5px;
}

#tos-case-study .tos-result-card h3{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  color:#fff;
  font-size:18px;
}

#tos-case-study .tos-result-card p{
  position:relative;
  z-index:1;
  margin:0;
  color:#afbdca;
  font-size:13px;
  line-height:1.8;
}

#tos-case-study .tos-cta{
  position:relative;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:40px 44px;
  overflow:hidden;
  border:1px solid rgba(231,184,75,.20);
  border-radius:30px;
  background:
    radial-gradient(circle at 84% 28%,rgba(231,184,75,.11),transparent 28%),
    radial-gradient(circle at 8% 86%,rgba(54,103,142,.10),transparent 28%),
    linear-gradient(135deg,rgba(18,45,70,.97),rgba(9,31,50,.99));
  box-shadow:
    0 30px 70px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#tos-case-study .tos-cta::before, #tos-case-study .tos-cta::after{
  content:"";
  position:absolute;
  border:1px solid rgba(231,184,75,.12);
  border-radius:50%;
  pointer-events:none;
}

#tos-case-study .tos-cta::before{
  width:340px;
  height:340px;
  left:-120px;
  top:-180px;
}

#tos-case-study .tos-cta::after{
  width:260px;
  height:260px;
  left:-70px;
  top:-120px;
  border-color:rgba(89,126,157,.12);
}

#tos-case-study .tos-cta-copy{
  position:relative;
  z-index:2;
  direction:rtl;
  text-align:right;
}

#tos-case-study .tos-cta h2{
  max-width:760px;
  margin:0 0 10px;
  color:#fff;
  font-size:34px;
  line-height:1.45;
}

#tos-case-study .tos-cta h2 span{
  color:#fff;
}

#tos-case-study .tos-cta h2 strong{
  color:#e0b34a;
}

#tos-case-study .tos-cta p{
  margin:0;
  color:#aebdcb;
  font-size:13px;
  line-height:1.8;
}

#tos-case-study .tos-cta-btn{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  min-width:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:16px 22px;
  border-radius:16px;
  color:#10283f;
  background:linear-gradient(135deg,#edc763,#d89b27);
  box-shadow:0 16px 36px rgba(181,120,22,.20);
  font-weight:800;
  transition:transform .25s ease,box-shadow .25s ease;
}

#tos-case-study .tos-cta-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 42px rgba(181,120,22,.28);
}

#tos-case-study .tos-cta-btn i{
  font-style:normal;
  font-size:20px;
  transition:transform .25s ease;
}

#tos-case-study .tos-cta-btn:hover i{
  transform:translateX(-5px);
}

/* ===== Same final qualification form, rethemed for TOS ===== */
#tos-case-study .lead-form-v69{
  position:relative;
  width:min(100%,1080px);
  margin:56px auto 0;
  padding:34px 36px;
  overflow:hidden;
  direction:rtl;
  border:1px solid rgba(231,184,75,.17);
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 5%,rgba(231,184,75,.09),transparent 24%),
    radial-gradient(circle at 5% 92%,rgba(58,105,142,.08),transparent 26%),
    linear-gradient(135deg,rgba(15,39,62,.98),rgba(8,29,47,.99));
  box-shadow:
    0 28px 70px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#tos-case-study .lead-form-v69::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  left:-180px;
  top:-190px;
  border:1px solid rgba(231,184,75,.08);
  border-radius:50%;
  pointer-events:none;
}

#tos-case-study .lead-form-v69-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:23px;
  margin-bottom:25px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

#tos-case-study .lead-form-v69-kicker{
  display:block;
  margin-bottom:8px;
  color:#d7a838;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:2.2px;
}

#tos-case-study .lead-form-v69-head h2{
  margin:0 0 7px;
  color:#fff;
  font-size:31px;
  line-height:1.32;
}

#tos-case-study .lead-form-v69-head p{
  max-width:700px;
  margin:0;
  color:#aebdcb;
  font-size:13.5px;
  line-height:1.8;
}

#tos-case-study .lead-form-v69-badge{
  flex:0 0 auto;
  padding:9px 13px;
  border:1px solid rgba(231,184,75,.20);
  border-radius:999px;
  background:rgba(231,184,75,.065);
  color:#e5bc58;
  font-size:11.5px;
  font-weight:800;
}

#tos-case-study .lead-form-v69-form{
  position:relative;
  z-index:1;
  display:grid;
  gap:23px;
}

#tos-case-study .lead-form-v69-basic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

#tos-case-study .form-field-v69{
  display:grid;
  gap:8px;
}

#tos-case-study .form-field-v69>span, #tos-case-study .form-group-v69 legend{
  color:#edf3fa;
  font-size:14px;
  font-weight:800;
}

#tos-case-study .form-field-v69 input{
  width:100%;
  height:50px;
  padding-inline:15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  outline:none;
  color:#fff;
  background:rgba(255,255,255,.045);
  font:inherit;
  font-size:13.5px;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

#tos-case-study .form-field-v69 input::placeholder{
  color:#73879d;
}

#tos-case-study .form-field-v69 input:focus{
  border-color:rgba(222,174,69,.66);
  background:rgba(255,255,255,.065);
  box-shadow:0 0 0 4px rgba(231,184,75,.07);
}

#tos-case-study .lead-form-v69-selects{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  grid-column:1/-1;
}

#tos-case-study .custom-select-field-v69{
  min-width:0;
}

#tos-case-study .custom-select-v69{
  position:relative;
  width:100%;
  z-index:4;
}

#tos-case-study .custom-select-v69.is-open{
  z-index:60;
}

#tos-case-study .custom-select-trigger-v69{
  width:100%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  outline:none;
  background:rgba(255,255,255,.045);
  color:#fff;
  font:inherit;
  font-size:13.5px;
  text-align:right;
  direction:rtl;
  cursor:pointer;
  box-shadow:none;
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}

#tos-case-study .custom-select-trigger-v69:hover{
  border-color:rgba(231,184,75,.30);
  background:rgba(255,255,255,.06);
}

#tos-case-study .custom-select-v69.is-open .custom-select-trigger-v69{
  border-color:rgba(222,174,69,.68);
  background:rgba(255,255,255,.065);
  box-shadow:0 0 0 4px rgba(231,184,75,.07);
}

#tos-case-study .custom-select-v69.is-error .custom-select-trigger-v69{
  border-color:#ff6f78;
  box-shadow:0 0 0 4px rgba(255,111,120,.07);
}

#tos-case-study .custom-select-value-v69{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#edf3fa;
  font-weight:500;
}

#tos-case-study .custom-select-value-v69.is-placeholder{
  color:#73879d;
}

#tos-case-study .custom-select-chevron-v69{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(231,184,75,.08);
  color:#e1b34b;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}

#tos-case-study .custom-select-chevron-v69::before{
  content:"";
  width:7px;
  height:7px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-1px);
}

#tos-case-study .custom-select-v69.is-open .custom-select-chevron-v69{
  transform:rotate(180deg);
  background:rgba(231,184,75,.15);
  color:#f0c968;
}

#tos-case-study .custom-select-menu-v69{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  left:0;
  z-index:100;
  display:grid;
  gap:4px;
  max-height:280px;
  overflow:auto;
  padding:7px;
  border:1px solid rgba(231,184,75,.18);
  border-radius:15px;
  background:linear-gradient(180deg,#14314c 0%,#0c263d 100%);
  box-shadow:
    0 22px 50px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px) scale(.985);
  transform-origin:top center;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
  scrollbar-width:thin;
  scrollbar-color:rgba(216,164,60,.40) transparent;
}

#tos-case-study .custom-select-v69.is-open .custom-select-menu-v69{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

#tos-case-study .custom-option-v69{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#dce7f3;
  font:inherit;
  font-size:13px;
  text-align:right;
  direction:rtl;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

#tos-case-study .custom-option-v69:hover, #tos-case-study .custom-option-v69:focus-visible{
  outline:none;
  transform:translateX(-2px);
  color:#fff;
  background:linear-gradient(90deg,rgba(231,184,75,.15),rgba(130,94,31,.10));
}

#tos-case-study .custom-option-v69.is-selected{
  color:#fff;
  background:linear-gradient(90deg,rgba(231,184,75,.20),rgba(130,94,31,.14));
}

#tos-case-study .custom-option-check-v69{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  color:transparent;
  font-size:12px;
  background:rgba(255,255,255,.035);
}

#tos-case-study .custom-option-v69.is-selected .custom-option-check-v69{
  color:#0f2b44;
  border-color:rgba(231,184,75,.46);
  background:linear-gradient(135deg,#ebc45f,#cf8e20);
}

#tos-case-study .custom-select-v69.drop-up-v69 .custom-select-menu-v69{
  top:auto;
  bottom:calc(100% + 8px);
  transform-origin:bottom center;
  transform:translateY(7px) scale(.985);
}

#tos-case-study .custom-select-v69.drop-up-v69.is-open .custom-select-menu-v69{
  transform:translateY(0) scale(1);
}

#tos-case-study .form-group-v69{
  min-width:0;
  padding:0;
  margin:0;
  border:0;
}

#tos-case-study .form-group-v69 legend{
  margin-bottom:11px;
}

#tos-case-study .choice-grid-v69{
  display:grid;
  gap:9px;
}

#tos-case-study .choice-grid-v69-time{
  grid-template-columns:repeat(3,minmax(0,165px));
  justify-content:start;
}

#tos-case-study .choice-grid-v69 label{
  position:relative;
  min-width:0;
  cursor:pointer;
}

#tos-case-study .choice-grid-v69 input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

#tos-case-study .choice-grid-v69 label>span{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.095);
  border-radius:13px;
  color:#b9c7d5;
  background:rgba(255,255,255,.035);
  font-size:12px;
  line-height:1.45;
  text-align:center;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}

#tos-case-study .choice-grid-v69 label:hover>span{
  transform:translateY(-2px);
  border-color:rgba(231,184,75,.28);
  background:rgba(255,255,255,.055);
  color:#eef3ff;
}

#tos-case-study .choice-grid-v69 input:checked+span{
  border-color:rgba(231,184,75,.66);
  background:linear-gradient(135deg,rgba(231,184,75,.16),rgba(91,126,154,.08));
  color:#fff;
  box-shadow:
    0 12px 28px rgba(91,67,24,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#tos-case-study .lead-form-v69-submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}

#tos-case-study .lead-form-v69-submit-row p{
  margin:0;
  color:#7f92a7;
  font-size:11.5px;
  line-height:1.7;
}

#tos-case-study .lead-form-v69-submit{
  appearance:none;
  min-width:180px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border:0;
  border-radius:15px;
  color:#10283f;
  background:linear-gradient(135deg,#edc763,#d89b27);
  box-shadow:0 16px 36px rgba(181,120,22,.20);
  font-family:inherit;
  font-size:14.5px;
  font-weight:800;
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;
}

#tos-case-study .lead-form-v69-submit:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 42px rgba(181,120,22,.28);
}

#tos-case-study .lead-form-v69-submit i{
  font-style:normal;
  font-size:20px;
}

/* Outcome reveal */
#tos-case-study .tos-results.motion-ready .tos-results-head, #tos-case-study .tos-results.motion-ready .tos-result-card, #tos-case-study .tos-results.motion-ready .tos-cta, #tos-case-study .tos-results.motion-ready .lead-form-v69{
  opacity:0;
  transform:translateY(24px);
}

#tos-case-study .tos-results.motion-ready.is-live .tos-results-head, #tos-case-study .tos-results.motion-ready.is-live .tos-result-card, #tos-case-study .tos-results.motion-ready.is-live .tos-cta, #tos-case-study .tos-results.motion-ready.is-live .lead-form-v69{
  opacity:1;
  transform:none;
  transition:
    opacity .7s ease,
    transform .8s cubic-bezier(.16,.82,.2,1);
}

#tos-case-study .tos-results.motion-ready.is-live .tos-results-head{transition-delay:.04s}
#tos-case-study .tos-results.motion-ready.is-live .tos-result-card:nth-child(1){transition-delay:.14s}
#tos-case-study .tos-results.motion-ready.is-live .tos-result-card:nth-child(2){transition-delay:.24s}
#tos-case-study .tos-results.motion-ready.is-live .tos-result-card:nth-child(3){transition-delay:.34s}
#tos-case-study .tos-results.motion-ready.is-live .tos-result-card:nth-child(4){transition-delay:.44s}
#tos-case-study .tos-results.motion-ready.is-live .tos-cta{transition-delay:.52s}
#tos-case-study .tos-results.motion-ready.is-live .lead-form-v69{transition-delay:.62s}

@media(max-width:1050px){
  #tos-case-study .tos-results-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  #tos-case-study .tos-results{
    padding:78px 0 54px;
  }

  #tos-case-study .tos-results-wrap{
    width:min(100% - 30px,1180px);
  }

  #tos-case-study .tos-results-head h2{
    font-size:38px;
  }

  #tos-case-study .tos-results-head p{
    font-size:15px;
  }

  #tos-case-study .tos-results-grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:34px;
  }

  #tos-case-study .tos-result-card{
    min-height:auto;
    padding:20px;
  }

  #tos-case-study .tos-cta{
    min-height:auto;
    flex-direction:column;
    padding:32px 22px;
    text-align:center;
  }

  #tos-case-study .tos-cta-copy{
    text-align:center;
  }

  #tos-case-study .tos-cta h2{
    font-size:28px;
  }

  #tos-case-study .tos-cta-btn{
    width:100%;
  }

  #tos-case-study .lead-form-v69{
    width:100%;
    padding:24px 18px;
    border-radius:23px;
  }

  #tos-case-study .lead-form-v69-head{
    flex-direction:column;
    gap:16px;
  }

  #tos-case-study .lead-form-v69-head h2{
    font-size:25px;
  }

  #tos-case-study .lead-form-v69-basic, #tos-case-study .lead-form-v69-selects{
    grid-template-columns:1fr;
  }

  #tos-case-study .lead-form-v69-selects{
    gap:14px;
  }

  #tos-case-study .custom-select-menu-v69{
    max-height:240px;
  }

  #tos-case-study .choice-grid-v69-time{
    grid-template-columns:repeat(3,1fr);
  }

  #tos-case-study .lead-form-v69-submit-row{
    flex-direction:column;
    align-items:stretch;
  }

  #tos-case-study .lead-form-v69-submit{
    width:100%;
  }
}

@media(max-width:480px){
  #tos-case-study .choice-grid-v69-time{
    grid-template-columns:1fr;
  }
}


/* V41 — clearer hero benefit icons */
#tos-case-study .benefit-icon{
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
  color:#e2b64e !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(231,184,75,.18),rgba(231,184,75,.045) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(113,76,16,.08);
}

#tos-case-study .benefit-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#tos-case-study .benefit-card:hover .benefit-icon{
  color:#f0c968 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 26px rgba(113,76,16,.12);
}

@media(max-width:720px){
  #tos-case-study .benefit-icon{
    width:46px !important;
    height:46px !important;
    flex:0 0 46px !important;
  }
  #tos-case-study .benefit-icon svg{
    width:23px;
    height:23px;
  }
}


/* V42 — Font Awesome ready-made hero icons */
#tos-case-study .benefit-icon svg{
  display:none !important;
}

#tos-case-study .benefit-icon i{
  display:block;
  font-size:25px;
  line-height:1;
  color:currentColor;
}

#tos-case-study .benefit-card:nth-child(1) .benefit-icon i{
  font-size:24px;
}

#tos-case-study .benefit-card:nth-child(2) .benefit-icon i{
  font-size:25px;
}

#tos-case-study .benefit-card:nth-child(3) .benefit-icon i{
  font-size:24px;
}

@media(max-width:720px){
  #tos-case-study .benefit-icon i{
    font-size:21px !important;
  }
}


/* =========================================================
   V43 — GLOBAL MOTION TRAIL ACROSS THE WHOLE PAGE
   Same structure as the original CRM build
========================================================= */
#tos-case-study > .global-motion-trail{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  pointer-events:none !important;
  z-index:40 !important;
  opacity:.92 !important;
  display:block;
}

/* Keep the trail visible while never interfering with clicks. */
#tos-case-study > .global-motion-trail{
  touch-action:none;
}

/* On reduced-motion setups keep the existing accessibility behavior. */
@media (prefers-reduced-motion:reduce){
  #tos-case-study > .global-motion-trail{
    display:none !important;
  }
}


/* WordPress/TheGem integration: preserve the original site header/footer. */
#tos-case-study{
  position:relative;
  z-index:1;
  width:100%;
  overflow-x:clip;
  font-family:"Cairo",sans-serif;
}

body.tos-project-page .site-header{
  z-index:9999;
}

body.tos-project-page.admin-bar .site-header{
  top:32px;
}

body.tos-project-page .footer{
  margin-top:0;
}

/* Keep project hero clear of the original fixed navbar. */
body.tos-project-page #tos-case-study .tos-hero{
  padding-top:78px;
}

body.tos-project-page #tos-case-study .hero-grid{
  min-height:700px;
}

@media(max-width:782px){
  body.tos-project-page.admin-bar .site-header{top:46px;}
}

@media(max-width:720px){
  body.tos-project-page #tos-case-study .tos-hero{padding-top:68px;}
}