/* Think LAB — Landing (PRODUÇÃO: tudo escopado sob .tl-root) */
.tl-root{--indigo-950: #070a24; --indigo-900: #0a0e34; --indigo-800: #101653; --indigo-700: #1a237e; --indigo-500: #3949ab; --indigo-300: #8b96d8; --gold: #c9a227; --paper: #f3f4fb; --paper-2: #e9ebf6; --white: #ffffff; --ink: #15162f; --muted: #5b6178; --line: #e2e5f1; --accent: #f57c00; --accent-soft: color-mix(in oklch, var(--accent) 18%, transparent); --accent-light: color-mix(in oklch, var(--accent) 65%, white); --font-display: 'Space Grotesk',system-ui,sans-serif; --font-body: 'IBM Plex Sans',system-ui,sans-serif; --font-mono: 'IBM Plex Mono',ui-monospace,monospace;}
.tl-root *{box-sizing: border-box; margin: 0px; padding: 0px;}
.tl-root,.tl-root{height: 100%;}
.tl-root{font-family: var(--font-body); color: var(--ink); background: var(--indigo-950); -webkit-font-smoothing: antialiased; overflow: hidden;}
.tl-root .snap{height: 100svh; overflow: hidden scroll; scroll-behavior: smooth; position: relative; z-index: 1;}
.tl-root[data-snap="mandatory"] .snap{scroll-snap-type: y mandatory;}
.tl-root[data-snap="proximity"] .snap{scroll-snap-type: y;}
.tl-root[data-snap="off"] .snap{scroll-snap-type: none;}
.tl-root .snap::-webkit-scrollbar{width: 0px;}
.tl-root .snap{scrollbar-width: none;}
.tl-root .section{position: relative; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 7vw, 8rem); overflow: hidden;}
.tl-root .wrap{width: 100%; max-width: 1180px; margin: 0px auto;}
.tl-root .section.dark{background: radial-gradient(125% 120% at 80% 0%, rgba(26, 35, 126, 0.5) 0%, rgba(10, 14, 52, 0.82) 48%, rgba(7, 10, 36, 0.9) 100%); color: rgb(255, 255, 255);}
.tl-root .section.light{background: rgba(243, 244, 251, 0.72); color: var(--ink);}
.tl-root .section.paper2{background: linear-gradient(rgba(243, 244, 251, 0.74) 0%, rgba(233, 235, 246, 0.8) 100%); color: var(--ink);}
.tl-root #fx{position: fixed; inset: 0px; z-index: 0; overflow: hidden; background: radial-gradient(120% 100% at 80% -10%, rgb(17, 22, 58) 0%, rgb(7, 10, 36) 70%);}
.tl-root #fx > *{display: none; position: absolute; inset: 0px;}
.tl-root[data-bg="aurora"] #fx .aurora{display: block;}
.tl-root[data-bg="grid"] #fx .grid-fx{display: block;}
.tl-root[data-bg="video"] #fx .video-wrap{display: block;}
.tl-root .aurora .blob{position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; will-change: transform;}
.tl-root .aurora .b1{width: 48vw; height: 48vw; left: -8vw; top: -10vw; opacity: 0.7; background: radial-gradient(circle, oklch(0.62 0.18 264), transparent 70%); animation: 24s ease-in-out 0s infinite normal none running drift1;}
.tl-root .aurora .b2{width: 42vw; height: 42vw; right: -10vw; top: 8vh; opacity: 0.38; background: radial-gradient(circle,var(--accent),transparent 70%); animation: 28s ease-in-out 0s infinite normal none running drift2;}
.tl-root .aurora .b3{width: 40vw; height: 40vw; left: 32vw; bottom: -16vw; opacity: 0.3; background: radial-gradient(circle, oklch(0.72 0.13 96), transparent 70%); animation: 32s ease-in-out 0s infinite normal none running drift3;}
@keyframes drift1 { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(8vw, 6vh) scale(1.16); }
}
@keyframes drift2 { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-7vw, 9vh) scale(1.12); }
}
@keyframes drift3 { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(6vw, -8vh) scale(1.22); }
}
.tl-root .grid-fx{background-image: linear-gradient(rgba(140, 150, 216, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 150, 216, 0.13) 1px, transparent 1px); background-size: 58px 58px; animation: 22s linear 0s infinite normal none running gridmove; mask: radial-gradient(125% 100% at 50% 0%, rgb(0, 0, 0) 30%, transparent 92%);}
.tl-root .grid-fx::before{content: ""; position: absolute; inset: 0px; background: radial-gradient(50vw 36vh at 78% 8%, oklch(0.6 0.16 264 / 0.5), transparent 70%);}
@keyframes gridmove { 
  100% { background-position: 0px 58px, 58px 0px; }
}
.tl-root .video-wrap video{width: 100%; height: 100%; object-fit: cover; opacity: 0.45;}
.tl-root .video-wrap::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(7, 10, 36, 0.5), rgba(7, 10, 36, 0.72));}
.tl-root #fx .fx-paper,.tl-root #fx .aurora-l,.tl-root #fx .grid-l,.tl-root #fx .video-wrap-l{display: block; opacity: 0; transition: opacity 0.6s;}
.tl-root .fx-paper{background: radial-gradient(120% 100% at 80% -10%, rgb(253, 253, 255) 0%, rgb(238, 240, 250) 58%, rgb(230, 232, 245) 100%);}
.tl-root[data-active-theme="light"] #fx .fx-paper{opacity: 1;}
.tl-root .aurora-l .blob{position: absolute; border-radius: 50%; filter: blur(85px); mix-blend-mode: multiply; will-change: transform;}
.tl-root .aurora-l .lb1{width: 50vw; height: 50vw; left: -10vw; top: -12vw; opacity: 0.62; background: radial-gradient(circle, oklch(0.7 0.13 264), transparent 70%); animation: 26s ease-in-out 0s infinite normal none running drift1;}
.tl-root .aurora-l .lb2{width: 44vw; height: 44vw; right: -12vw; top: 6vh; opacity: 0.5; background: radial-gradient(circle,var(--accent),transparent 72%); animation: 30s ease-in-out 0s infinite normal none running drift2;}
.tl-root .aurora-l .lb3{width: 42vw; height: 42vw; left: 30vw; bottom: -18vw; opacity: 0.46; background: radial-gradient(circle, oklch(0.78 0.12 96), transparent 72%); animation: 34s ease-in-out 0s infinite normal none running drift3;}
.tl-root .grid-l{background-image: linear-gradient(rgba(57, 73, 171, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 73, 171, 0.11) 1px, transparent 1px); background-size: 58px 58px; animation: 22s linear 0s infinite normal none running gridmove; mask: radial-gradient(125% 100% at 50% 0%, rgb(0, 0, 0) 30%, transparent 92%);}
.tl-root .video-wrap-l video{width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(1.05);}
.tl-root .video-wrap-l::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(243, 244, 251, 0.46), rgba(243, 244, 251, 0.38));}
.tl-root[data-bg="grid"][data-active-theme="light"] #fx .grid-l{opacity: 1;}
.tl-root[data-bg="aurora"][data-active-theme="light"] #fx .video-wrap-l,.tl-root[data-bg="video"][data-active-theme="light"] #fx .video-wrap-l{opacity: 1;}
@media (prefers-reduced-motion: reduce){.tl-root .aurora .blob,.tl-root .grid-fx,.tl-root .aurora-l .blob,.tl-root .grid-l{animation: auto ease 0s 1 normal none running none;}
.tl-root[data-active-theme="light"] #fx .video-wrap-l{opacity: 0 !important;}
.tl-root[data-bg="aurora"][data-active-theme="light"] #fx .aurora-l,.tl-root[data-bg="video"][data-active-theme="light"] #fx .aurora-l{opacity: 1;}
}
.tl-root .kicker{font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500;}
.tl-root .dark .kicker{color: var(--accent-light);}
.tl-root .light .kicker,.tl-root .paper2 .kicker{color: var(--accent);}
.tl-root h1,.tl-root h2,.tl-root h3{font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em;}
.tl-root .h-hero{font-size: clamp(3.2rem, 9vw, 7.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.92;}
.tl-root .h-sec{font-size: clamp(2.1rem, 4.6vw, 3.6rem);}
.tl-root .lead{font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.5; color: var(--muted); max-width: 54ch;}
.tl-root .dark .lead{color: var(--indigo-300);}
.tl-root .sec-index{font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; opacity: 0.55;}
.tl-root .btn-row{display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center;}
.tl-root .btn{font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 0.95rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; transition: transform 0.15s, box-shadow 0.25s, background 0.2s, border-color 0.2s;}
.tl-root .btn-solid{background: var(--accent); color: rgb(26, 18, 8); box-shadow: 0 10px 30px -8px var(--accent-soft);}
.tl-root .btn-solid:hover{transform: translateY(-2px); box-shadow: 0 16px 40px -10px var(--accent-soft);}
.tl-root .btn-ghost{border-color: rgba(255, 255, 255, 0.32); color: rgb(255, 255, 255);}
.tl-root .btn-ghost:hover{border-color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.07);}
.tl-root .light .btn-ghost,.tl-root .paper2 .btn-ghost{border-color: var(--line); color: var(--ink);}
.tl-root .light .btn-ghost:hover,.tl-root .paper2 .btn-ghost:hover{border-color: var(--ink); background: rgba(0, 0, 0, 0.03);}
.tl-root .dots{position: fixed; right: clamp(1rem, 2.4vw, 2.4rem); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 1rem;}
.tl-root[data-dots="off"] .dots{display: none;}
.tl-root .dot{position: relative; width: 11px; height: 11px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; background: rgba(120, 130, 190, 0.35); transition: transform 0.25s, background 0.25s;}
.tl-root .dot:hover{transform: scale(1.3);}
.tl-root .dot.active{background: var(--accent); transform: scale(1.35);}
.tl-root .dot .tip{position: absolute; right: 24px; top: 50%; transform: translateY(-50%) translateX(6px); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; background: rgba(10, 14, 52, 0.92); color: rgb(255, 255, 255); padding: 0.3rem 0.55rem; border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;}
.tl-root .dot:hover .tip{opacity: 1; transform: translateY(-50%) translateX(0px);}
.tl-root .prog{position: fixed; left: 0px; top: 0px; height: 3px; width: 100%; z-index: 45; background: transparent;}
.tl-root .prog i{display: block; height: 100%; width: 0px; background: linear-gradient(90deg,var(--accent),var(--gold)); transition: width 0.15s linear;}
.tl-root .brand{display: flex; align-items: center; gap: 0.7rem;}
.tl-root .brand .sq{width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(140deg,var(--accent),var(--accent-light)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: rgb(36, 20, 0); font-size: 1.4rem; box-shadow: 0 6px 18px -6px var(--accent-soft);}
.tl-root .brand .wm{font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; white-space: nowrap;}
.tl-root .brand .wm b{font-weight: 700;}
.tl-root .dark .brand .wm{color: rgb(255, 255, 255);}
.tl-root .dark .brand .wm em{font-style: normal; color: var(--accent-light);}
.tl-root .light .brand .wm em,.tl-root .paper2 .brand .wm em{font-style: normal; color: var(--accent);}
.tl-root .brand-fixed{position: fixed; top: clamp(0.9rem, 2.2vh, 1.5rem); left: clamp(1.1rem, 3vw, 2.4rem); z-index: 42; text-decoration: none; gap: 0.5rem; padding: 0.25rem 0.35rem;}
.tl-root .brand-fixed .sq{width: 30px; height: 30px; border-radius: 8px; font-size: 1.12rem;}
.tl-root .brand-fixed .wm{font-size: 1.05rem; color: rgb(255, 255, 255); transition: color 0.4s;}
.tl-root .brand-fixed .wm em{font-style: normal; color: var(--accent-light);}
.tl-root[data-active-theme="light"] .brand-fixed .wm{color: var(--ink);}
.tl-root[data-active-theme="light"] .brand-fixed .wm em{color: var(--accent);}
.tl-root .badge{display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid rgba(201, 162, 39, 0.5); color: var(--gold);}
.tl-root .hint{position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--indigo-300); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase;}
.tl-root .hint .ch{width: 22px; height: 22px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); animation: 1.6s ease-in-out 0s infinite normal none running bob;}
@keyframes bob { 
  0%, 100% { transform: rotate(45deg) translate(0px, 0px); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}
.tl-root .split{display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;}
.tl-root .stack{display: flex; flex-direction: column; gap: 1.5rem;}
.tl-root .frame{border-radius: 14px; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: rgba(4, 7, 30, 0.7) 0px 40px 90px -30px, rgba(4, 7, 30, 0.5) 0px 8px 24px -10px;}
.tl-root .light .frame,.tl-root .paper2 .frame{border-color: var(--line); box-shadow: rgba(26, 35, 126, 0.35) 0px 40px 90px -35px;}
.tl-root .frame .bar{height: 34px; background: rgb(12, 17, 64); display: flex; align-items: center; gap: 6px; padding: 0px 12px;}
.tl-root .light .frame .bar,.tl-root .paper2 .frame .bar{background: rgb(238, 240, 248);}
.tl-root .frame .bar i{width: 11px; height: 11px; border-radius: 50%; background: rgb(58, 66, 128); display: block;}
.tl-root .light .frame .bar i,.tl-root .paper2 .frame .bar i{background: rgb(199, 204, 224);}
.tl-root .frame .bar i:nth-child(2){background: rgb(74, 82, 144);}
.tl-root .frame img{display: block; width: 100%;}
.tl-root .chips{display: flex; gap: 0.7rem; flex-wrap: wrap;}
.tl-root .chip{background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1.05rem; min-width: 118px;}
.tl-root .dark .chip{background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12);}
.tl-root .chip .n{font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--indigo-700);}
.tl-root .dark .chip .n{color: rgb(255, 255, 255);}
.tl-root .chip .l{font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.25rem;}
.tl-root .dark .chip .l{color: var(--indigo-300);}
.tl-root .areas{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;}
.tl-root .area{background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;}
.tl-root .area:hover{transform: translateY(-6px); box-shadow: rgba(26, 35, 126, 0.4) 0px 24px 50px -24px; border-color: var(--accent);}
.tl-root .area .tag{width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: rgb(255, 255, 255);}
.tl-root .area h3{font-size: 1.25rem; font-weight: 600;}
.tl-root .area ul{list-style: none; display: flex; flex-direction: column; gap: 0.45rem;}
.tl-root .area li{font-size: 0.86rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.35;}
.tl-root .area li::before{content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 0.5rem; flex: 0 0 auto;}
.tl-root .cycle{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: st 0;}
.tl-root .step{position: relative; padding-top: 2.4rem;}
.tl-root .step::before{counter-increment: st 1; content: "0" counter(st); position: absolute; top: 0px; left: 0px; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--accent); opacity: 0.95;}
.tl-root .step h3{font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: rgb(255, 255, 255);}
.tl-root .step p{font-size: 0.9rem; line-height: 1.45; color: var(--indigo-300);}
.tl-root .step::after{content: ""; position: absolute; top: 0.7rem; right: -0.5rem; width: 1rem; height: 2px; background: rgba(139, 150, 216, 0.4);}
.tl-root .step:last-child::after{display: none;}
.tl-root .dims{display: flex; flex-direction: column; gap: 1.15rem;}
.tl-root .dim{display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem;}
.tl-root .dim .name{font-weight: 600; font-size: 1.05rem; min-width: 130px;}
.tl-root .dim .name small{display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 400; text-transform: uppercase; margin-top: 0.15rem;}
.tl-root .dim .track{height: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden;}
.tl-root .dim .track i{display: block; height: 100%; border-radius: 999px;}
.tl-root[data-anim="on"] .section.in .dim .track i{animation: 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s 1 normal backwards running grow;}
@keyframes grow { 
  0% { }
}
.tl-root .dim .pct{font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; min-width: 64px; text-align: right; letter-spacing: -0.02em;}
.tl-root .steps-v{display: flex; flex-direction: column; gap: 1.2rem; counter-reset: sv 0;}
.tl-root .stepv{position: relative; padding-left: 3.4rem;}
.tl-root .stepv::before{counter-increment: sv 1; content: "0" counter(sv); position: absolute; left: 0px; top: -0.1rem; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--accent);}
.tl-root .stepv::after{content: ""; position: absolute; left: 1rem; top: 2rem; bottom: -1.2rem; width: 2px; background: rgba(139, 150, 216, 0.28);}
.tl-root .stepv:last-child::after{display: none;}
.tl-root .stepv h3{font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; color: rgb(255, 255, 255);}
.tl-root .stepv p{font-size: 0.88rem; line-height: 1.45; color: var(--indigo-300);}
.tl-root .credit{font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--indigo-300);}
.tl-root .credit b{color: var(--gold); font-weight: 600;}
.tl-root .prof-split{align-items: center;}
.tl-root .prof-figure{position: relative; width: 100%; max-width: 360px;}
.tl-root .prof-photo{position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: rgba(26, 35, 126, 0.4) 0px 40px 90px -35px;}
.tl-root .prof-photo img{display: block; width: 100%;}
.tl-root .prof-photo::after{content: ""; position: absolute; inset: 0px; border-radius: 20px; box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 0px 1px inset;}
.tl-root .prof-pin{position: absolute; left: -14px; bottom: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 0.7rem 1rem; box-shadow: rgba(26, 35, 126, 0.5) 0px 16px 36px -16px;}
.tl-root .prof-pin .deg{display: flex; align-items: baseline; gap: 0.5rem;}
.tl-root .prof-pin .deg + .deg{margin-top: 0.4rem;}
.tl-root .prof-pin b{font-family: var(--font-display); font-weight: 600; color: var(--indigo-700); font-size: 0.95rem;}
.tl-root .prof-pin small{font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase;}
.tl-root .prof-role{font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500;}
.tl-root .prof-exp{font-size: 0.92rem; color: var(--muted);}
.tl-root .prof-tags{display: flex; flex-wrap: wrap; gap: 0.5rem;}
.tl-root .prof-tag{font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.42rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--white);}
.tl-root .prof-quote{position: relative; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.45; color: var(--ink); padding-top: 1.2rem; max-width: 52ch;}
.tl-root .prof-quote .qmark{font-size: 3.2rem; line-height: 0; color: var(--accent); position: absolute; top: 1.4rem; left: -0.1rem; opacity: 0.85;}
.tl-root .prof-quote span.txt{display: block; text-indent: 1.7rem;}
.tl-root .dark .prof-exp{color: var(--indigo-300);}
.tl-root .dark .prof-quote{color: rgb(255, 255, 255);}
.tl-root .dark .prof-tag{color: var(--indigo-300); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14);}
.tl-root .dark .prof-photo{border-color: rgba(255, 255, 255, 0.14);}
@media (prefers-reduced-motion: no-preference){.tl-root[data-anim="on"] .section.in .reveal{animation: 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal backwards running riseIn;}
.tl-root[data-anim="on"] .section.in .reveal[data-d="1"]{animation-delay: 0.06s;}
.tl-root[data-anim="on"] .section.in .reveal[data-d="2"]{animation-delay: 0.14s;}
.tl-root[data-anim="on"] .section.in .reveal[data-d="3"]{animation-delay: 0.22s;}
.tl-root[data-anim="on"] .section.in .reveal[data-d="4"]{animation-delay: 0.3s;}
.tl-root[data-anim="on"] .section.in .reveal[data-d="5"]{animation-delay: 0.38s;}
}
@keyframes riseIn { 
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: none; }
}
.tl-root .section.shown .reveal,.tl-root .section.shown .dim .track i{animation: auto ease 0s 1 normal none running none !important;}
@media (max-width: 880px){.tl-root{overflow: auto;}
.tl-root .snap{height: auto; overflow: visible; scroll-snap-type: none !important;}
.tl-root .section{scroll-snap-align: none; min-height: auto; padding: 4.5rem 1.4rem;}
.tl-root .split{grid-template-columns: 1fr; gap: 2rem;}
.tl-root .prof-figure{margin: 0px auto;}
.tl-root .areas{grid-template-columns: 1fr 1fr;}
.tl-root .cycle{grid-template-columns: 1fr 1fr; gap: 1.6rem;}
.tl-root .step::after{display: none;}
.tl-root .dots{display: none !important;}
.tl-root .dim{grid-template-columns: 1fr; gap: 0.5rem;}
.tl-root .dim .pct{text-align: left;}
.tl-root .hint{display: none;}
}
@media (max-width: 520px){.tl-root .areas{grid-template-columns: 1fr;}
.tl-root .cycle{grid-template-columns: 1fr;}
}

/* ===== production layout — isolated inside the .tl-root box ===== */
.tl-root{position:relative;height:100svh;overflow:hidden}
.tl-root #fx{position:absolute}
.tl-root .prog,.tl-root .brand-fixed,.tl-root .dots{position:absolute}
.tl-root .snap{height:100%}
@media (max-width:880px){.tl-root{height:auto;overflow:visible}}