/* ===== shared frame ===== */
.sec-dark{background:var(--bg);color:var(--w);border-radius:28px}
.sec-light{background:var(--lt);color:var(--ltt);border-radius:28px}
.cover{position:relative;z-index:2;border-radius:28px 28px 0 0;overflow:hidden}
.uc-ctn{max-width:1120px;margin:0 auto;padding:0 24px}

.uc-eye{display:block;font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--c);margin-bottom:22px}
.uc-eye-l{color:var(--c)}

/* ===== FIRST SECTION — copy + rotating dot globe (unique to use-cases) ===== */
.uc-top{background:var(--bg);padding:clamp(124px,17vh,188px) clamp(24px,5vw,56px) clamp(64px,9vh,104px);overflow:hidden}
.uc-top-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.uc-top-copy h1{font-size:clamp(40px,5.6vw,78px);font-weight:800;letter-spacing:-3px;line-height:1;color:var(--w);margin:0 0 22px;animation:heroIn 1s var(--ease) both .05s}
.uc-top-copy h1 b{color:var(--c);font-weight:800}
.uc-top-copy p{font-size:17px;line-height:1.62;letter-spacing:-.2px;color:var(--w2);max-width:440px;margin:0 0 28px;animation:heroIn 1s var(--ease) both .22s}
.uc-top-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:-.2px;color:var(--c);animation:heroIn 1s var(--ease) both .4s;transition:color .25s var(--ease)}
.uc-top-link svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.uc-top-link:hover{color:var(--c2)}
.uc-top-link:hover svg{transform:translateY(3px)}
.uc-globe-wrap{position:relative;width:100%;max-width:540px;aspect-ratio:1;margin:0 auto;justify-self:center}
.uc-globe-wrap::before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 48%,rgba(200,206,222,.10),transparent 60%);pointer-events:none}
.uc-globe{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s var(--ease);cursor:grab;touch-action:pan-y;contain:layout paint}
.uc-globe.ready{opacity:1}
.uc-globe-fallback::after{content:'';position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(200,206,222,.2);background:radial-gradient(circle at 50% 40%,rgba(200,206,222,.07),transparent 65%)}
@media(max-width:860px){
  .uc-top-inner{grid-template-columns:1fr;text-align:center;gap:clamp(16px,3vh,28px)}
  .uc-top-copy p{margin-left:auto;margin-right:auto}
  .uc-globe-wrap{max-width:340px}
}
@media(max-width:600px){.uc-top-copy h1{letter-spacing:-1.6px}}

.uc-section-head{text-align:center;margin-bottom:clamp(64px,8vh,96px);max-width:680px;margin-left:auto;margin-right:auto}
.uc-section-head .uc-eye{margin-bottom:18px}
.uc-section-head h2{font-size:clamp(34px,4.5vw,56px);font-weight:700;letter-spacing:-2.2px;line-height:1.05;margin-bottom:16px}
.sec-dark .uc-section-head h2{color:var(--w)}
.sec-light .uc-section-head h2{color:var(--ltt)}
.uc-section-head h2 b{color:var(--c);font-weight:700}
.uc-section-head p{font-size:15px;line-height:1.6;letter-spacing:-.2px}
.sec-dark .uc-section-head p{color:var(--w2)}
.sec-light .uc-section-head p{color:var(--ltt2)}


/* ===== INTRO (light, editorial) ===== */
.uc-intro{padding:clamp(120px,15vh,180px) 0}
.uc-intro-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,96px);align-items:start}
.uc-intro-l h2{font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-2.4px;line-height:1;color:var(--ltt)}
.uc-intro-r p{font-size:17px;line-height:1.65;letter-spacing:-.25px;color:var(--ltt2);margin-bottom:18px}
.uc-intro-r p:last-child{margin-bottom:0}

/* ===== SCENARIOS (dark) — bookshelf: six photo spines, hover cracks open, click expands ===== */
.uc-scenarios{padding:clamp(120px,15vh,180px) 0}
.uc-shelf-wrap{max-width:1560px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.uc-shelf{display:flex;gap:12px;height:clamp(580px,74vh,710px)}
.uc-shelf.rv{transform:none}
.uc-shelf .uc-spine{opacity:0}
.uc-shelf.v .uc-spine{animation:ucShelfIn .7s var(--ease) both}
.uc-shelf.v .uc-spine:nth-child(2){animation-delay:.07s}
.uc-shelf.v .uc-spine:nth-child(3){animation-delay:.14s}
.uc-shelf.v .uc-spine:nth-child(4){animation-delay:.21s}
.uc-shelf.v .uc-spine:nth-child(5){animation-delay:.28s}
.uc-shelf.v .uc-spine:nth-child(6){animation-delay:.35s}
@keyframes ucShelfIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.uc-spine{position:relative;flex:1 1 0;min-width:0;appearance:none;-webkit-appearance:none;border:1px solid var(--b);border-radius:20px;overflow:hidden;background:#0e0e11;padding:0;cursor:pointer;font-family:var(--f);text-align:left;color:var(--w);transition:flex-grow .85s var(--ease),border-color .45s var(--ease)}
.uc-spine.open{flex-grow:7;border-color:rgba(212,164,74,.28)}
@media(hover:hover){
  .uc-spine:not(.open):hover{flex-grow:1.4;border-color:var(--bh)}
  .uc-spine:not(.open):hover .uc-spine-bg{filter:saturate(.95) brightness(1.02);transform:scale(1.03)}
  .uc-spine:not(.open):hover .uc-spine-num{color:rgba(255,255,255,.24)}
}
.uc-spine:focus-visible{outline:2px solid rgba(212,164,74,.6);outline-offset:3px}
.uc-spine-bg{position:absolute;inset:0;background-color:#101014;background-size:cover;background-position:center;filter:saturate(.85) brightness(.9);transform:scale(1.06);transition:filter .7s var(--ease),transform 1.4s var(--ease)}
.uc-spine.open .uc-spine-bg{filter:saturate(.92) brightness(.94);transform:scale(1)}
.uc-shelf.bgs .uc-spine[data-uc="finance"] .uc-spine-bg{background-image:url('/images/use-cases/finance.jpg')}
.uc-shelf.bgs .uc-spine[data-uc="sales"] .uc-spine-bg{background-image:url('/images/use-cases/sales.jpg')}
.uc-shelf.bgs .uc-spine[data-uc="support"] .uc-spine-bg{background-image:url('/images/use-cases/support.jpg')}
.uc-shelf.bgs .uc-spine[data-uc="marketing"] .uc-spine-bg{background-image:url('/images/use-cases/marketing.jpg')}
.uc-shelf.bgs .uc-spine[data-uc="operations"] .uc-spine-bg{background-image:url('/images/use-cases/operations.jpg')}
.uc-shelf.bgs .uc-spine[data-uc="executive"] .uc-spine-bg{background-image:url('/images/use-cases/executive.jpg')}
.uc-spine-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.34),rgba(8,8,10,.04) 42%,rgba(8,8,10,.68) 96%)}
.uc-spine-shade2{position:absolute;inset:0;opacity:0;background:linear-gradient(78deg,rgba(8,8,10,.92) 16%,rgba(8,8,10,.5) 56%,rgba(8,8,10,.08));transition:opacity .6s var(--ease)}
.uc-spine.open .uc-spine-shade2{opacity:1}
.uc-spine-closed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:26px 24px 16px;opacity:1;transition:opacity .4s var(--ease) .32s}
.uc-spine.open .uc-spine-closed{opacity:0;transition:opacity .16s var(--ease)}
.uc-spine-title{font-size:18px;font-weight:600;letter-spacing:-.3px;line-height:1.25;color:var(--w);text-shadow:0 1px 18px rgba(0,0,0,.65);transition:opacity .4s var(--ease)}
.uc-spine-num{font-size:clamp(64px,7.4vw,110px);font-weight:800;letter-spacing:-4px;line-height:.78;color:rgba(255,255,255,.13);text-shadow:0 2px 28px rgba(0,0,0,.4);margin-left:-4px;transform-origin:bottom left;transition:color .45s var(--ease),transform .6s var(--ease)}
.uc-shelf.has-open .uc-spine:not(.open) .uc-spine-title{opacity:0}
.uc-shelf.has-open .uc-spine:not(.open) .uc-spine-num{transform:scale(.5)}
.uc-spine-plus{display:none}
.uc-spine-detail{position:absolute;left:0;bottom:0;width:clamp(300px,44vw,560px);display:flex;flex-direction:column;gap:15px;padding:clamp(24px,3vw,38px);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.uc-spine.open .uc-spine-detail{opacity:1;transform:none;transition:opacity .55s var(--ease) .32s,transform .55s var(--ease) .32s}
.uc-spine-tag{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--c)}
.uc-spine-prompt{font-size:clamp(19px,1.9vw,24px);font-weight:500;font-style:italic;letter-spacing:-.5px;line-height:1.32;color:var(--w);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.uc-spine-out{display:flex;gap:10px;align-items:baseline;font-size:14.5px;line-height:1.62;letter-spacing:-.15px;color:#b7b3ac;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.uc-spine-arr{font-family:var(--m);font-weight:600;font-style:normal;color:var(--c);flex-shrink:0}
@media(prefers-reduced-motion:reduce){
  .uc-shelf .uc-spine,.uc-shelf.v .uc-spine{animation:none;opacity:1;transform:none}
}

/* ===== ROLES (light, hairline grid) ===== */
.uc-roles{padding:clamp(120px,15vh,180px) 0}
.uc-roles-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ltb);border-left:1px solid var(--ltb)}
.uc-role{padding:clamp(28px,3.5vh,40px) clamp(22px,3vw,32px);border-right:1px solid var(--ltb);border-bottom:1px solid var(--ltb)}
.uc-role h4{font-size:16px;font-weight:600;letter-spacing:-.25px;color:var(--ltt);margin-bottom:10px}
.uc-role p{font-size:13.5px;color:var(--ltt2);line-height:1.6;letter-spacing:-.1px}

/* ===== INDUSTRIES (dark, numbered grid — different from roles) ===== */
.uc-industries{padding:clamp(120px,15vh,180px) 0}
.uc-ind-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,5vw,64px) clamp(28px,4vw,56px)}
.uc-ind{}
.uc-ind-num{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:1.8px;color:var(--c);margin-bottom:12px}
.uc-ind h4{font-size:18px;font-weight:600;letter-spacing:-.3px;color:var(--w);margin-bottom:10px;padding-top:14px;border-top:1px solid var(--b)}
.uc-ind p{font-size:14px;color:var(--w2);line-height:1.6;letter-spacing:-.15px}

/* ===== CTA (light) ===== */
.uc-cta{padding:clamp(120px,16vh,180px) 24px;text-align:center}
.uc-cta-inner{max-width:700px;margin:0 auto}
.uc-cta h2{font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-2.2px;line-height:1.05;margin-bottom:16px;color:var(--ltt)}
.uc-cta h2 b{color:var(--c);font-weight:700}
.uc-cta p{font-size:16px;color:var(--ltt2);margin-bottom:32px;letter-spacing:-.2px;line-height:1.55}

/* ===== responsive ===== */
@media(max-width:960px){
  .uc-intro-grid{grid-template-columns:1fr;gap:32px}
  .uc-roles-grid{grid-template-columns:repeat(2,1fr)}
  .uc-ind-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .uc-shelf-wrap{padding:0 24px}
  .uc-shelf{flex-direction:column;height:auto;gap:10px}
  .uc-spine{flex:none;height:104px;transition:height .6s var(--ease),border-color .45s var(--ease)}
  .uc-spine.open{height:clamp(372px,108vw,440px)}
  .uc-spine-closed{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;padding:0 20px}
  .uc-spine-title{font-size:16.5px}
  .uc-spine-num{order:-1;font-size:56px;letter-spacing:-2.5px;line-height:1;margin-left:0;transform:none!important}
  .uc-shelf.has-open .uc-spine:not(.open) .uc-spine-title{opacity:1}
  .uc-spine-plus{display:grid;place-items:center;margin-left:auto;width:28px;height:28px;border-radius:9px;background:rgba(8,8,10,.45);border:1px solid var(--bh)}
  .uc-spine-plus svg{width:12px;height:12px;color:var(--w2)}
  .uc-spine-detail{width:100%;padding:20px;gap:12px}
  .uc-spine-prompt{font-size:17px;letter-spacing:-.35px}
  .uc-spine-out{font-size:13.5px}
}
@media(max-width:600px){
  .uc-intro-l h2{letter-spacing:-1.6px}
  .uc-roles-grid{grid-template-columns:1fr}
  .uc-ind-grid{grid-template-columns:1fr}
}